如何在HTML中查看数组

how to view an array in HTML

本文关键字：数组 HTML      更新时间：2023-09-26

因此，我希望在输入制造商时返回的数组在HTML中显示数组中每个对象的完整数据。然而，当我在HTML页面中调用该函数时，我只返回word对象，但制造商在原始数组中定义了许多次。有人能帮忙吗?

// To make program read the data inside the array cars and pick the ones with the      desired manufacturer//
function findManufacturer(manufacturer) {
    var retcars = [];
    for (i = 0; i < cars.length-1; i++) {
        car = cars[i]
        if (car.manufacturer == manufacturer) {
            retcars.push(car)
        }
    }
    display(retcars);
}
function display(mycars) {
    document.getElementById('mycars').textContent= mycars;
}

在最简单的级别上，您可以使用JSON.stringify。这在调试时非常有用:

function display(mycars) {
    document.getElementById('mycars').textContent= JSON.stringify(mycars);
}

您还可以遍历数组，然后遍历每辆车的属性，生成一些动态HTML:

function display(mycars) {
    var html = '';
    for (var car in mycars) {
        for (var prop in car) {
            html += prop + ': ' + car[prop];
        }
        html += '<hr/>';
    }
    document.getElementById('mycars').innerHTML = html;
}

理想情况下，您希望能够编写HTML模板来显示数据。我建议看看一些客户端模板引擎，比如Mustache.js或Underscore.js。这些引擎允许您编写带有标记的HTML模板来表示数据字段:

<script type="text/template" id="car-template"> 
    <% _.each(cars, function(car) { %>
        <div>
            <div><%= make %></div>
            <div><%= model %></div>
        <div>
        <hr/>
    <% } %>
</script>

然后你只需像这样写:

function display(mycars) {
    var template = _.template(document.getElementById("car-template"));
    var html = template({ cars: mycars });
    document.getElementById('mycars').innerHTML = html;
}

mycars是一个数组，所以你不能将元素的文本内容设置为数组…这就是为什么你会得到著名的[Object Object]字符串。

在将数组插入DOM之前，需要解析数组并将其转换为某种HTML。

尝试这样做，我们把mycars的内容放入一个表，然后把它放入您的<div id="mycars">:

function display(mycars) {
    var table = '<table>';
    for (var i = 0; i < mycars.length; i++) {
        table += '<tr>';
        foreach (var prop in mycars[i]) {
            table += '<td>' + mycars[i][prop] + '</td>';
        }
        table += '</tr>';
    }
    table += '</table>';
    document.getElementById('mycars').innerHTML = table;
}

试试这些改变:

function display(mycars) {
  document.getElementById('mycars').innerHTML= mycars.toString();
}

先进使用JSON.stringify 

var x={a:"hello",b:[1,2,3]},
    y=function(a,b){return typeof b==='string'?undefined:b},
    D=document;
D.body.appendChild(D.createElement('pre')).textContent=JSON.stringify(x,y,' ');


JSON.stringify(Array,ReplacerFunction,SpaceToUse)
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

replace函数允许您在创建文本字符串之前替换数组/对象中的一些值。在我的例子中，我排除了字符串。

元素pre

我也喜欢使用pre，因为它是预格式化的，所以''n'是一个新行''t'是一个标签，在我的例子中，我有一个简单的空白。

http://jsfiddle.net/T8u32/

带替换功能

http://jsfiddle.net/T8u32/1/

相关文章：