javascript - 如何在 HTML 中查看数组

Question

所以我希望当我输入制造商时返回的数组能够显示 HTML 中数组内每个对象的完整数据。然而，当我在 HTML 页面中调用该函数时，无论在原始数组中定义了多少次Manufacturer，我都只能返回单词对象。有人可以帮忙吗？

// 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;
}

Answer 1

在最简单的层面上，您可以只使用 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;
}