2012-04-10 215 views
2

我最近在HTML,JSON和jQuery上开始了一个演示项目。 我想现在要实现的是从JSON文件中获取数据并将其加载到我的表中。 我是JSON的新手,所以花了我一天的时间,没有将数据加载到我的表中。从JSON数据创建联系表

这里是我的JSON文件, 'contact.json':

{ 
    "length": 2, 
    "info": [ 
     { 
      "fullname":"Noob Here", 
      "email":"[email protected]", 
      "phone":"123456", 
      "badgeid": "11111", 
     }, 
     { 
      "fullname":"Newbie There", 
      "email":"[email protected]", 
      "phone":"589433", 
      "badgeid": "11112", 
     } 
    ] 
} 

我的脚本加载数据:

window.onload = function() { 
    var contacts; 
    setTimeout(loadData(contacts, "contact"), 2000); 
    $(contacts.info).each(function(index, element){ 
     $('#contacts').append('<tr><td>' + element.fullname + '</td><td>' 
      + element.email + '</td><td>' 
      + element.phone + '</td><td>' 
      + element.badgeid + '</td></tr>');  
    }) 
}; 

function loadData(myobject, myfile){ 
    myobject = $.parseJSON("../data/" + myfile + ".json"); 
}; 

请注意,我可能想从不同的JSON文件加载,所以loadData在那里有一些修正。否则,它会直接解析JSON文件。

我已经在HTML中声明了'#contact'表。 错误控制台说:

Uncaught SyntaxError: Unexpected token.
jQuery.extend.parseJSONjquery.min.js:442
loadDataHomepage.html:23
window.onload

为什么会出现此错误?我该如何解决这个问题?

+0

+1 - 伟大,整洁,格式良好和详细的问题。 – jmort253 2012-04-10 04:04:57

回答

1

通过JSON验证程序运行您的JSON,例如JSONLint.com。你有一个语法错误在你的JSON:

{ 
    "length": 2, 
    "info": [ 
     { 
      "fullname":"Noob Here", 
      "email":"[email protected]", 
      "phone":"123456", 
      "badgeid": "11111", <---- Do not put a comma before a curly brace 
     }, 
     { 
      "fullname":"Newbie There", 
      "email":"[email protected]", 
      "phone":"589433", 
      "badgeid": "11112", <---- remove comma before curly brace 
     } 
    ] 
} 

你的JSON应该不是这个样子:

{ 
    "length": 2, 
    "info": [ 
     { 
      "fullname":"Noob Here", 
      "email":"[email protected]", 
      "phone":"123456", 
      "badgeid": "11111" 
     }, 
     { 
      "fullname":"Newbie There", 
      "email":"[email protected]", 
      "phone":"589433", 
      "badgeid": "11112" 
     } 
    ] 
} 
+0

谢谢jmort253,我对结构太粗心了。但固定的JSON文件后,错误仍然存​​在。 – Shinigamae 2012-04-10 04:18:00

+1

尝试使用相同的URL在浏览器中加载JSON文件。确保你没有看到一个缓存副本。或者,在URL的末尾添加一个查询参数来缓存缓存,例如'。.parseJSON(“../ data /”+ myfile +“.json?t = 12345”);'。另外,如果您还没有这样做,请通过JSONLint重新运行您的JSON,直到它无错误地进行验证。另外,请尝试清除缓存。做所有这些应该确保你没有看到缓存在浏览器中的东西。 ../data目录中加载了哪个网址。确保路径正确。 – jmort253 2012-04-10 04:36:30

+1

太好了,在我清理完所有的缓存之后,它就可以运行了。似乎是因为我使用清单缓存文件,并且它一直在加载旧文件。再次感谢@ jmort253。 – Shinigamae 2012-04-10 07:13:21

3

参考这篇文章

JSON.parse unexpected character error

我又知道你解析已解析JSON

你可以替换你的scrip点如下:

window.onload = function() { 
     var contacts; 
     $.getJSON('contact.json',function(contacts) 
     { 
      $(contacts.info).each(function(index, element){ 
       $('#contacts').append('<tr><td>' + element.fullname + '</td><td>' 
       + element.email + '</td><td>' 
       + element.phone + '</td><td>' 
       + element.badgeid + '</td></tr>');  
      }) 
     }); 
    }; 
+1

它简化了我的代码,真正解决了问题。感谢和问候,@Usman。 – Shinigamae 2012-04-10 07:14:43

+1

虽然这不是问题,但用于清理代码并帮助解决问题的方法是+1。干净的代码使故障排除变得更加顺畅! – jmort253 2012-04-10 07:17:40

+0

@ jmort253..thnx编辑.... @ shinigamae你是最受欢迎的 – Usman 2012-04-10 07:23:17