表json数据使用jQuery返回undefined

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 for example

Answer 3

您正尝试引用数据，就像它一样： 行：[{date：''，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>");

    });