如何在 HTML 中查看数组答案

【问题标题】：how to view an array in HTML如何在 HTML 中查看数组
【发布时间】：2014-06-09 23:38:19
【问题描述】：

所以我想要在输入制造商时返回的数组以显示 HTML 中数组内每个对象的完整数据。但是，当我在 HTML 页面中调用该函数时，我只会返回单词 object，但是多次在原始数组中定义制造商。有人可以帮忙吗？

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

【问题讨论】：

标签： javascript arrays html object

【解决方案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;
}

【讨论】：

非常感谢我终于明白了:)

【解决方案2】：

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

【讨论】：

非常感谢您的帮助:)

【解决方案3】：

尝试这些更改：

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

【讨论】：

请注意，toString() 不提取属性，它只是显示“[object]”字符串（它实际上与执行隐式字符串转换的 OP 代码相同）。

【解决方案4】：

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/

【讨论】：