表JSON数据使用jQuery返回未定义

Question

嗨，我很困惑为什么表中的数据未定义返回。 我想我接近了。 请查看我的jsfiddle：

$(document).ready(function() {
    $.getJSON( "http://www.corsproxy.com/dvl.thomascooper.com/data/json_return.json", function( data ) {
        //static table head
        $('table.stats').append("<th>" + "</th>" + "<th>" + "Date" + "</th>" + "<th>" + "Brand" + "</th>" + "<th>" + "Author" + "</th>" + "<th>" + "Title" + "</th>" + "<th>" + "Posts" + "</th>" + "<th>" + "Exposure" + "</th>" + "<th>" + "Engagement" + "</th>"); 
        //loop through json data
        $.each(data.data.rows,function( i, val ){
            //+1 to number each row starting at 1
            var rowNum = i + 1;
            //create table rows and cell and populate with data 
            $('table.stats').append(  "<tr>" + "<td>" + rowNum + "</td>" + "<td>" +    val.date + "</td>" +"<td>" + val.brand_id + "</td>" + "<td>" + val.author + "</td>" + "<td>" + val.title +  "</td>" + "<td>" + val.posts + "</td>" + "<td>" + val.reach + "</td>" + "<td>" + val.interaction + "</td>" + "</tr>");

        }); 
    });
});

小提琴： http ： //jsfiddle.net/tommy6s/eLbq2wvh/

Answer 1

$.each(data.data.rows,function( i, val ) {

在这里，val不是对象（您的数据告诉我）

因此，您无法访问未定义的属性，如下所示： val.date

我想，这是您想要的：

$(document).ready(function() {


$.getJSON( "http://www.corsproxy.com/dvl.thomascooper.com/data/json_return.json", function( data ) {

    //static table head
    $('table.stats').append("<th>" + "</th>" + "<th>" + "Date" + "</th>" + "<th>" + "Brand" + "</th>" + "<th>" + "Author" + "</th>" + "<th>" + "Title" + "</th>" + "<th>" + "Posts" + "</th>" + "<th>" + "Exposure" + "</th>" + "<th>" + "Engagement" + "</th>"); 
        //loop through json data
        $.each(data.data.rows,function( i, val ){
            //+1 to number each row starting at 1
            var rowNum = i + 1;
            //create table rows and cell and populate with data 
            $('table.stats').append(  "<tr>" + "<td>" + rowNum + "</td>" + "<td>" + val[0].value + "</td>" +"<td>" + val[1].value + "</td>" + "<td>" + val[2] + "</td>" + "<td>" + val[3].label +  "</td>" + "<td>" + val[4].values[0] + "</td>" + "<td>" + val[5].values[0] + "</td>" + "<td>" + val[6].values[0] + "</td>" + "</tr>");

        }); 
    });


});

Answer 2

如果查看返回的json-行是数组的数组，而不是对象的数组。。您没有考虑到这一点。

$.each(data.data.rows[0],function( i, val ){

另外，您正在尝试通过数据的值而不是键来访问数据的值。

"<td>" + val.field + "</td>" +"<td>" + val.type + "</td>"

例如检出此jsbin

Answer 3

您正在尝试引用数据，就好像它们是：行：[{日期：”，brand_id：”，作者：，等等}，下一组字段]

您实际上得到的是：

行：[[具有字段数据的对象，具有字段数据的对象，等等]，另一组字段数据对象，等等]

这是一个脚本的开始，该脚本将灵活地返回内容。 我遗漏了许多您需要处理的情况：

    //loop through json data
    $.each(data.data.rows,function( i, val ){
        //+1 to number each row starting at 1
        var rowNum = i + 1, fields = {};

        // Find fields
        $.each(val, function(j, fieldData) {
            if(typeof fieldData == 'string') {
                fields.author = fieldData;
            } else if(fieldData.field == 'title') {
                fields.title = fieldData.label;
            } else {
                fields[fieldData.field] = fieldData.value;
            }
        });

        //create table rows and cell and populate with data 
        $('table.stats').append(  "<tr>" + "<td>" + rowNum + "</td>" + "<td>" + fields.date + "</td>" +"<td>" + fields.brand_id + "</td>" + "<td>" + fields.author + "</td>" + "<td>" + fields.title +  "</td>" + "<td>" + fields.posts + "</td>" + "<td>" + fields.reach + "</td>" + "<td>" + fields.interaction + "</td>" + "</tr>");

    });