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

这个通用函数（原始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对其进行格式化。

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

2 个答案: