[英]table json data returning undefined using jQuery
Hi I'm stumped as to why the data in my table is returned undefined. 嗨,我很困惑为什么表中的数据未定义返回。 I think I'm close. 我想我接近了。 Please check out my jsfiddle: 请查看我的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>");
});
});
});
fiddle: http://jsfiddle.net/tommy6s/eLbq2wvh/ 小提琴: http : //jsfiddle.net/tommy6s/eLbq2wvh/
$.each(data.data.rows,function( i, val ) {
Here, val is not object (Your data told me that) 在这里,val不是对象(您的数据告诉我)
So you could not access property that undefined like this: val.date 因此,您无法访问未定义的属性,如下所示: val.date
I think, here is what you want: 我想,这是您想要的:
$(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>");
});
});
});
If you look at the returned json - rows is an array of arrays not an array of objects.. You failed to take this into consideration. 如果查看返回的json-行是数组的数组,而不是对象的数组。。您没有考虑到这一点。
$.each(data.data.rows[0],function( i, val ){
Also you are trying to access the value of the data by its value instead of by its key. 另外,您正在尝试通过数据的值而不是键来访问数据的值。
"<td>" + val.field + "</td>" +"<td>" + val.type + "</td>"
Checkout this jsbin for example 例如检出此jsbin
You are trying to reference the data as if it were: rows: [ { date: '', brand_id: '', author: '', etc }, next set of fields] 您正在尝试引用数据,就好像它们是:行:[{日期:”,brand_id:”,作者:,等等},下一组字段]
What you are actually getting is: 您实际上得到的是:
rows: [ [ object with field data, object with field data, etc], another array of field data objects, etc] 行:[[具有字段数据的对象,具有字段数据的对象,等等],另一组字段数据对象,等等]
Here is a beginning to a script that will be flexible in how things will be returned. 这是一个脚本的开始,该脚本将灵活地返回内容。 I've left out many of the cases you'll need to deal with: 我遗漏了许多您需要处理的情况:
//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>");
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.