[
  {"key":"apple","value":1.90},
  {"key":"berry","value":1.7},
  {"key":"banana","value":1.5},
  {"key":"cherry","value":1.2}
]

说明

您想要的是用JavaScript用HTML填充一个表（或另一个DOMElement），一旦加载页面并接收到JSON对象，就会动态执行JavaScript。

您希望在对象中循环。最好的方法是使用for循环，并确保循环变量对对象的长度（其所有属性）保持有效。

获取JSON对象长度的最佳方法是通过myJSONObject.length：选择myJSONObject的键并返回它们的计数。

您可以在for循环中以以下方式访问JSON对象中存储的值（假设定义的循环变量名为i）：myJSONObject[i].theAttributeIWantToGet

---

价格格式分解

现在，这些价格需要有一个合适的格式，不是吗？因此，我们将检查value属性中的.之后是否有少于2个字符。如果是，我们再加一个十进制0。在写入格式化值之前，我们还添加了一个$。以下是它的工作原理：

• obj[i].value.toString().substring(startIndex, length)

  • 我们想检查.符号之后的长度，所以我们的startIndex将是这个点在字符串中的位置
  • obj[i].value.toString().substring(obj[i].value.toString().indexOf('.'),length)
  • 我们现在需要设置长度。我们想找到点后面所有东西的长度，所以为了安全起见，我们会取整个字符串的长度

  • 最终结果：obj[i].value.toString().substring(obj[i].value.toString().indexOf('.'), obj[i].value.toString().length) < 2

    • 这将返回true或false。如果是真的：点后面的数字不到2位

  • 我们添加if语句和最后一个零：

  • if (obj[i].value.toString().substring(obj[i].value.toString().indexOf('.'), obj[i].value.toString().length) < 2) obj[i].value += "0";

---

还有：为什么我使用innerHTML而不是appendChild()。

---

解决方案

JSFiddle

HTML

<table>
    <tbody id="tbody"></tbody>
</table>

JSON

[{
    "key": "apple",
    "value": 1.90
}, {
    "key": "berry",
    "value": 1.7
}, {
    "key": "banana",
    "value": 1.5
}, {
    "key": "cherry",
    "value": 1.2
}]

JavaScript

注意：在此实例中，JSON对象将命名为obj。

var tbody = document.getElementById('tbody');
for (var i = 0; i < obj.length; i++) {
    var tr = "<tr>";
    /* Verification to add the last decimal 0 */
    if (obj[i].value.toString().substring(obj[i].value.toString().indexOf('.'), obj[i].value.toString().length) < 2) 
        obj[i].value += "0";
    /* Must not forget the $ sign */
    tr += "<td>" + obj[i].key + "</td>" + "<td>$" + obj[i].value.toString() + "</td></tr>";
    /* We add the table row to the table body */
    tbody.innerHTML += tr;
}

JSFiddle

它可以简单地通过一个小&智能流程：

<table cellpadding="2" cellspacing="2" border="0" bgcolor="#dfdfdf" width="40%" align="center">
<thead>
    <tr>
        <th>Name</th>
        <th width="20%">Age</th>
        <th width="12%">Status</th>
    </tr>
</thead>
    <tbody id="tableData"></tbody>
</table>
<script type="text/javascript">
    var mainObj = [
        {
            name: "Kapil",
            age:  21,
            status: "Active"
        },
        {
            name: "John",
            age:  28,
            status: "Inactive"
        },
        {
            name: "Deos",
            age:  18,
            status: "Active"
        }
    ];
    var k = '<tbody>'
    for(i = 0;i < mainObj.length; i++){
        k+= '<tr>';
        k+= '<td>' + mainObj[i].name + '</td>';
        k+= '<td>' + mainObj[i].age + '</td>';
        k+= '<td>' + mainObj[i].status + '</td>';
        k+= '</tr>';
    }
    k+='</tbody>';
    document.getElementById('tableData').innerHTML = k;
    </script>

您可以这样做：

var table = document.createElement("table");
//Add a header
var header = document.createElement("tr");
var idHeaderCell = document.createElement("th");
var nameHeaderCell = document.createElement("th");
var relevanceHeaderCell = document.createElement("th");
header.appendChild(idHeaderCell);
header.appendChild(nameHeaderCell);
header.appendChild(relevanceHeaderCell);
table.appendChild(header);
//Add the rest of the data to the table
for(var i = 0; i < data.length; i++) {
    var id = (i + 1);
    var name = data[i].key;
    var relevance = data[i].value;
    var tr = document.createElement("tr");
    var idCell = document.createElement("td");
    var nameCell = document.createElement("td");
    var relevanceCell = document.createElement("td");
    idCell.appendChild(document.createTextNode(id));
    nameCell.appendChild(document.createTextNode(name));
    relevanceCell.appendChild(document.createTextNode(relevance));
    tr.appendChild(idCell);
    tr.appendChild(nameCell);
    tr.appendChild(relevanceCell);
    table.appendChild(tr);
}

这里有一个函数，用于从任何集合（对象数组）构建表

表创建者

const data=[
    {
        name: "Kapil",
        age:  21,
        status: "Active"
    },
    {
        name: "John",
        age:  28,
        status: "Inactive"
    },
    {
        name: "Deos",
        age:  18,
        status: "Active",
        testing: 'Gooo!!'
    }
]
const createTable=function(data){
const table = document.createElement("table");
const header = document.createElement("tr");
const keys=Object.keys(data[0])
console.log(keys)
for(const key of keys){
    const th=document.createElement("th");
    th.appendChild(document.createTextNode(key));
    header.appendChild(th);
}
table.appendChild(header);
const len=data.length
for(const row of data) {
    const tr = document.createElement("tr");
    for(const key of keys){
        const td = document.createElement("td");
        const content=row[key] ||''
        td.appendChild(document.createTextNode(content));
        tr.appendChild(td);
        delete row[key]
    }
  /****
  you can omit next cycle if all object have the same structor or if the first element of collection have all fields
  ****/
    for(const key in  row){
        const th=document.createElement("th");
        th.appendChild(document.createTextNode(key))
        keys.push(key)
        header.appendChild(th);
        const td = document.createElement("td");
        const content=row[key] ||''
        td.appendChild(document.createTextNode(content));
        tr.appendChild(td);
    }
    table.appendChild(tr);
}
return table

}

Array.map（）与模板文本相结合，可以非常方便地以可扩展的方式在Javascript中为大型对象呈现HTML标记：

function tableMarkupFromObjectArray(obj) {
  let headers = `
  <th>Index</th>
  ${Object.keys(obj[0]).map((col) =>`
  <th>${col}</th>`
  ).join('')}`
  let content = obj.map((row, idx) => `
<tr>
      <td>${idx}</td>
      ${Object.values(row).map((datum) => `
      <td>${datum}</td>`
    ).join('')}
    </tr>
`).join('')
  let tablemarkup = `
  <table>
    ${headers}
    ${content}
  </table>
  `
  return tablemarkup
}

let myobj =[
  { "name": "apple", "rel": 1.90 },
  { "name": "berry", "rel": 1.7 },
  { "name": "banana", "rel": 1.5 },
  { "name": "cherry", "rel": 1.2 }
]
document.querySelector("#mydiv").innerHTML = tableMarkupFromObjectArray(myobj)

http://jsfiddle.net/4L7c5vad/

这是我的ES6解决方案。我使用reduce操作构建了一个Set，用于存储数组中所有对象的密钥：

    function arrayToTable(data) {
        const keys = [...data.reduce((all, obj)=>{
            Object.keys(obj).forEach(key => all.add(key));
            return all;
        }, new Set())];
        const header = keys.map(key => `<th>${key}</th>`).join('')
        const tbody = data.map(row => keys.map(key => `<td>${row[key]}</td>`).join('')).map(row => `<tr>${row}</tr>`)
        return `<table>
            <thead><tr>${header}</tr></thead>
            <tbody>${tbody}</body>
        </table>`;
    }

通过这种方式遍历列表并检索每个项目的数据（假设您的数据在一个名为data的var中）：

for (var i = 0; i < data.length; i++) {
  var id = i + 1;
  var name = data[i].key;
  var relevance = data[i].value;
}

然后，对每个循环中的变量执行一些操作，根据需要打印出来。

我不完全确定你在要求什么。你帖子的标题看起来像是在寻找前面回答中提到的JSON.stringfy，但显然你不是。

您正在尝试创建HTML列表吗？你能再解释一下你的需要吗？我怀疑你想做的事情是否复杂，我相信如果你能提供更多的细节和目的，我们可以帮助你。

我猜您正试图通过在JSON对象上循环来显示HMTL。试试这个纯JavaScript的例子：

var fruits = JSON.parse('[{"key":"apple","value":1.90}, {"key":"berry","value":1.7}, {"key":"banana","value":1.5}, {"key":"cherry","value":1.2} ]');
var tbl = document.createElement('table');
var thead = document.createElement("thead");
var tbody = document.createElement("tbody")
var tr_head = document.createElement("tr");
var th_id = document.createElement("th");
var th_name = document.createElement("th");
var th_price = document.createElement("th");
th_id.textContent = "Id";
th_name.textContent = "Name";
th_price.textContent = "Price";
tr_head.appendChild(th_id);
tr_head.appendChild(th_name);
tr_head.appendChild(th_price);
thead.appendChild(tr_head);
for(var i = 0, j = fruits.length; i < j; i++) {
    var tr_body = document.createElement("tr");
    var td_id = document.createElement("td");
    var td_name = document.createElement("td");
    var td_value = document.createElement("td");
    td_id.textContent = i;
    td_name.textContent = fruits[i].key;
    td_value.textContent = fruits[i].value;
    tr_body.appendChild(td_id);
    tr_body.appendChild(td_name);
    tr_body.appendChild(td_value);
    tbody.appendChild(tr_body);
}

tbl.appendChild(thead);
tbl.appendChild(tbody);
 console.log(tbl);

可能是这样的：

function obj2htmltable(obj) {
    var html = '<table>';
    for (var key in obj) {
        var value = obj[key].toString();
        html += '<tr><td>' + key + '</td><td>' + value + '</tr>';
    }
    html += '</table>';
    return html;
}

如果嵌套结构（对象内部的对象）的情况下，obj2htmltable（）可以递归地调用自己：

function obj2htmltable(obj) {
    var html = '<table>';
    for (var key in obj) {
        var item = obj[key];
        var value = (typeof(item) === 'object') ? obj2htmltable(item) : item.toString();
        html += '<tr><td>' + key + '</td><td>' + value + '</tr>';
    }
    html += '</table>';
    return html;
}