如何使用 jquery 库显示 .json 文件中的内容？

Question

我正在尝试从我的 .json 文件（从服务器）获取数据并将其显示在页面上。我对JS的语法不太好，对不起。

我试图只显示文件中的一个参数，但我在屏幕上看不到任何内容。

<html>
<head>
<script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> 
</script>

<script>

$(function() {



$.getJSON("video.json", function(data)) {
   $.each(data.NewsSources, function(i, f) {
      var vid =  f.Name;
       $(vid).appendTo("#userdata");
 });

});

});
</script>
</head>

<body>


<div id= "userdata">
<h1>This is a name</h1>
</div>


</body>
</html>

video.json

{
"NewsSources": [
{
  "ID": 2004,
  "Name": "365TV Brasil",
  "Description": "",
  "URL": "https://www.instagram.com/365scoresbra",
  "Lang": 31,
  "CountryID": 21,
  "LogoUrl": "",
  "ImgVer": 0
 }
 ]
 }

Answer 1

你有一个小错误，而不是 $(vid).appendTo("#userdata") 你应该使用 $("#userdata").append(vid).

data = {
    "NewsSources": [{
        "ID": 2004,
        "Name": "365TV Brasil",
        "Description": "",
        "URL": "https://www.instagram.com/365scoresbra",
        "Lang": 31,
        "CountryID": 21,
        "LogoUrl": "",
        "ImgVer": 0
    }]
};
$.each(data.NewsSources, function(i, f) {
    var vid = f.Name;
    $("#userdata").append(vid);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="userdata">
    <h1>This is a name</h1>
</div>

也在 JSFiddle.

为什么...嗯，做 $("365TV Brasil") 是 jQuery select 或者 select 您的页面上什么也没有。另一方面，在 jQuery may be complicated. Therefor, better way is to use jQuery append method 中创建文本节点，它允许文本作为参数：

DOM element, text node, array of elements and text nodes, HTML string, or jQuery object to insert at the end of each element in the set of matched elements.

Answer 2

是的，谢谢，这段代码有效。我还有一个小错误，有两个括号而不是一个。在这一行 $.each(data.NewsSources, function(i, f)

<html>
<head>
<script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> 
</script>

<script>

$(function() {



$.getJSON('https://ws.365scores.com/Data/news/?newsitems=101640575', function(data) {
$.each(data.NewsSources, function(i, f) {
  var vid=f.Name;
   $("#userdata").append(vid);
});

});

});
</script>
</head>

 <body>


<div id= "userdata">
<h1>This is a name</h1>
</div>


</body> 
 </html>

如何使用 jquery 库显示 .json 文件中的内容？

How can I display the content from the .json file with jquery library?

ajax

jquery

json

getjson