使用 jQuery 显示来自 JSON 的数据答案

【问题标题】：Show data from JSON using jQuery使用 jQuery 显示来自 JSON 的数据
【发布时间】：2020-06-07 22:08:47
【问题描述】：

我有以下 JSON：

var data = [{"datapresub":"08\/08\/2018","datasub":"08\/08\/2018","nomeComune":"ROMA","provincia":"RM"}]

我想使用 jQuery 显示每个 Json 值的结果。问题是这个脚本只显示索引为零的对象的结果。

有什么办法吗？

我试过这个：

function(data) {
                            var jsonData = JSON.parse(data),
                                filterData = jsonData,
                                i;
                            for (i = 0; i < filterData.length; i++ ) {
                                if(filterData[i]['datasub']) {
                                    $('.nome-comune').html(filterData[i]['nomeComune']);
                                    $('.provincia').html(filterData[i]['provincia']);
                                    $('.data-sub').html(filterData[i]['datasub']);
                                    resultsSub();
                                } else if(filterData[i]['datapresub'] && filterData[i]['datasub'] == 0) {
                                    $('.nome-comune').html(filterData[i]['nomeComune']);
                                    $('.provincia').html(filterData[i]['provincia']);
                                    $('.data-presub').html(filterData[i]['datapresub']);
                                    resultsPresub();
                                }

                            }


                        }

Json 数据是从过滤来自 API 的数据的 PHP 脚本传递的。

谢谢

【问题讨论】：

向我们展示您尝试过但对您不起作用的方法
html() 方法替换了这些元素中的任何现有内容。所以循环的每次迭代都会清除以前的内容。预期的结果是什么？

标签： jquery json

【解决方案1】：

数据变量有更多的数组吗？你算上filterData.length。有数据显示在表格html使用append。

var data = [{"datapresub":"08\/08\/2018","datasub":"08\/08\/2018","nomeComune":"ROMA","provincia":"RM"}];
    console.log(data);

    let filterData = data;
    let tr = '';
    for (i = 0; i < filterData.length; i++ ) {
      tr += '<tr>'+
          '<td>'+filterData[i].datapresub+'</td>'+
          '<td>'+filterData[i].datasub+'</td>'+
          '<td>'+filterData[i].nomeComune+'</td>'+
          '<td>'+filterData[i].provincia+'</td>'+
        '</tr>';       
    }
    $('#table_element').append(tr);

并在您的视图页面中添加表格元素。

<table id="table_element" border=1></table>

【讨论】：

【解决方案2】：

在json parse 函数之后，您可以将其应用于解析 json 字符串。

   var data = JSON.parse('{"datapresub":"08\/08\/2018","datasub":"08\/08\/2018","nomeComune":"ROMA","provincia":"RM"}');
   document.getElementById("demo").innerHTML = data.datapresub + ", " + data.datasub + ", " + data.nomeComune + ", " + data.provincia;

<h2>Create Object from JSON String</h2>

<p id="demo"></p>

【讨论】：