从 JSON 文件创建联系人表
Posted
技术标签:
【中文标题】从 JSON 文件创建联系人表【英文标题】：Create contact table from JSON file 【发布时间】：2013-01-11 14:24:53 【问题描述】：我是 JSON 新手。
我最近在做一个关于 html、JSON 和 jQuery 的项目。我现在想要实现的是从 JSON 文件中获取数据并将其加载到我的表中。数据未加载到我的表中。
我的json文件contact.json
"length": 2,
"info": [
"name":"Sam",
"email":"fred@server.com",
"phone":"789456235"
,
"name":"Fred",
"email":"fred@server.com",
"phone":"125689564"
]
我的加载数据的脚本：
window.onload = function ()
var contacts;
setTimeout(function() //pass it an anonymous function that calls foo
loadData("contact");
,2000);
;
function loadData(myfile)
$.getJSON( myfile + ".json", function(data)
console.log(data)
$.each(data, function(index, element)
$.each(element, function(i, item)
$('#contacts').append('<tr><td>' + item.name + '</td><td>'+ item.email +'</td><td>' + item.phone + '</td><td>');
);
);
);
我的 HTML
<body>
<div id="tt" class="easyui-tabs" style="width:400px;height:250px;">
<div title="Home">
<table id='contacts'></table>
</div>
</div>
我从Create contact table from JSON data复制了整个内容
这是错误
TypeError: j is undefined
http://code.jquery.com/jquery-1.4.4.min.js
Line 32
我正在控制台中获取对象。但未加载数据。我该如何解决这个问题？
【问题讨论】：
你有 JS 错误吗？$.parseJSON("../data/" + myfile + ".json"); 解析一个 JSON 字符串返回一个 Object；它不会从您的 JSON 文件中获取数据。为此，您需要使用 $.getJSON("../data/" + myfile + ".json", function(data) //Parse JSON here )
【参考方案1】：
$.parseJSON() 解析 JSON 字符串以返回 JSON 对象。它不会从您的 JSON 文件中获取数据。为此，您需要使用$.getJSON(url, function(data) //Parse JSON here )
将您的 loadData 函数更新为：
function loadData(myobject, myfile)
$.getJSON("../data/" + myfile + ".json", function(data)
myobject = data;
$(myobject.info).each(function(index, element)
$('#contacts').append('<tr><td>' + element.name + '</td><td>'
+ element.email + '</td><td>'
+ element.phone + '</td><td>');
)
)
;
并将您的 onLoad 函数更改为：
window.onload = function ()
var contacts;
setTimeout(function()
loadData(contacts, "contact");
, 2000);
;
【讨论】：
我仍然没有在页面上获取数据 记录回调的结果，看看你是否真的得到了任何数据，即在myobject = data行之前放一个console.log(data)。
错误：无用的 setTimeout 调用（参数周围缺少引号？） setTimeout(loadData(contacts, "contact"));这是我遇到的错误
我正在控制台中获取对象。但数据没有加载【参考方案2】：
您正在将文件的相对 url 传递给 jQuery.parseJSON 函数。 API documentation says，即 jQuery.parseJSON:
采用格式良好的 JSON 字符串并返回结果 javascript 对象。
您应该首先加载 json 文件 (maybe with jQuery.getJSON()) 的内容并将结果传递给 parseJSON 函数。
第二：您在 HTML 和 JavaScript 中为表格使用不同的 ID。 “联系人”与“联系人”
【讨论】：
您的表的 id 为“contact”，但在 jQuery 中，您正尝试通过“#contacts”访问它。 （“s”太多了）。 我不想硬编码。我想从 JSON 文件中获取数据 当然，这只是为了 jsFiddle。我将您的 json 作为数据发送到 echo api，所以我将您的数据作为 json 接收（有点复杂）。而且我发现了另一个错误：在您的“追加”功能中，您缺少一个关闭表行 ()。最后一个试试这个：
因为你有info[]的数组
$(function ()
setTimeout(function() //pass it an anonymous function that calls foo
loadData('contact');
,2000);
);
function loadData(myfile)
$.getJSON("../data/" + myfile + ".json", function(data)
$.each(data, function(index, element)
$.each(element, function(i, item)
$('#contacts').append('<tr><td>' + item.name + '</td><td>'+ item.email +'</td><td>' + item.phone + '</td><td>');
);
);
);
我通过创建一个包含所有 json 值的 var json 在小提琴上做到了这一点。 http://jsfiddle.net/vyTjn/
【讨论】：
错误：无用的 setTimeout 调用（参数周围缺少引号？） file:///home/sreekeshos/jquery%20ui/index.html.erb 第 16 行 也试过了。现在我得到 Error: useless setTimeout call (missing quotes around argument?) code.jquery.com/jquery-1.4.4.min.js Line 32 TypeError: j is undefined code.jquery.com/jquery-1.4.4.min.js Line 32 我正在控制台中获取对象。但数据没有加载loadData('contact'); 与'quotes' 通话
让我们continue this discussion in chat以上是关于从 JSON 文件创建联系人表的主要内容，如果未能解决你的问题，请参考以下文章