如何解析这样的 Json 列表并在 HTML 中显示其元素？答案

【问题标题】：How to parse a Json list like this and display its elements in HTML?如何解析这样的 Json 列表并在 HTML 中显示其元素？
【发布时间】：2013-08-25 23:24:54
【问题描述】：

我通过使用 jQuery 的 getjson() 方法得到了一个 Json 对象：

<script>

$(document).ready(function(){

  $("button").click(function(){
    $.getJSON(the_api_url, {}, function(data) {
        // do something
    });
  });
  });

});

</script>

数据是一个数组列表，格式如下：

[
    {
        id : "001",
        name : "apple",
        class : "fruit",
        colour : "red"
    },
    {
        id : "002",
        name : "melon",
        class : "fruit",
        colour : "green"
    },
    {
        id : "003",
        name : "banana",
        class : "fruit",
        colour : "yellow"
    }
]

我是 JavaScript 新手，不知道如何在 html 页面中解析和显示它。你们能帮我解决“//做某事”部分的代码吗？

【问题讨论】：

查看 api doc 进行 dom 操作 api.jquery.com/category/manipulation/dom-insertion-inside
看看如何使用html()、append()等方法
@Arun P Johny。再见：）。我正在学习它。你能给我一个示例代码吗？
参考stackoverflow.com/questions/4189365/…中的代码
您的代码中有一个额外的});

标签： javascript jquery html json

【解决方案1】：

添加一个类似的html元素

<ul id="ct"></ul>

然后

$(document).ready(function(){

    $("button").click(function(){
        $.getJSON(the_api_url, {}, function(data) {
            var $ul = $('#ul')
            $.each(data, function(idx, item){
                $ul.append('<li style="color: ' + item.color + '">' + item.name + '-' + item['class'] +'</li>')
            })
        });
    });
});

【讨论】：

可能对appendChild 和lis 到ul 有用:)
我正在使用.each，但它只显示最后一个值。.append 在 2 个嵌套的 .each 中。 jQuery.each(arrayobj, function(key, value){ jQuery.each(value, function(label, answer){ display = '<tr><td>'+label+ '</td><td>' +answer+'</td></tr>'}); }); $('#tbody').append(display);

【解决方案2】：

这个通用函数（vanilla Javascript，没有外部库）处理所有的 json 数组；不需要你配置列：

function makeTable(D){
  var a = '';
  cols = Object.keys(D[0]);
  a += '<table><thead><tr>';
  for(j=0;j<cols.length;j++) {
    a+= `<th>${cols[j]}</th>`;
  }
  a += '</tr></thead><tbody>';

  for(i=0;i<D.length; i++) {
    a += '<tr>';
    for(j=0;j<cols.length;j++) {
      a += `<td>${D[i][cols[j]]}</td>`;
    }
    a += '</tr>';
  }
  a += '</tbody></table>';
  return a;
}

鉴于您的样本数据，

D = [
    {
        id : "001",
        name : "apple",
        class : "fruit",
        colour : "red"
    },
    {
        id : "002",
        name : "melon",
        class : "fruit",
        colour : "green"
    },
    {
        id : "003",
        name : "banana",
        class : "fruit",
        colour : "yellow"
    }
];

这是makeTable(D)的输出：

<table>
    <thead>
        <tr>
            <th>id</th>
            <th>name</th>
            <th>class</th>
            <th>colour</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>001</td>
            <td>apple</td>
            <td>fruit</td>
            <td>red</td>
        </tr>
        <tr>
            <td>002</td>
            <td>melon</td>
            <td>fruit</td>
            <td>green</td>
        </tr>
        <tr>
            <td>003</td>
            <td>banana</td>
            <td>fruit</td>
            <td>yellow</td>
        </tr>
    </tbody>
</table>

您可以使用此站点预览 HTML：https://www.onlinehtmleditor.net/ 原始输出全部在一行中；我使用html formatter 对其进行格式化。

【讨论】：