表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>");

    });