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

Question

我通过使用 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 页面中解析和显示它。你们能帮我处理“//做某事”部分的代码吗？

Answer 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>')
            })
        });
    });
});

Answer 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 格式化程序来格式化它。