Как я могу отобразить содержимое файла .json с помощью библиотеки jquery? - PullRequest
Новая
       70

Как я могу отобразить содержимое файла .json с помощью библиотеки jquery?

1 голос
/ 11 июля 2019

Я пытаюсь получить данные из моего файла .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
 }
 ]
 }

Ответы [ 2 ]

2 голосов
/ 11 июля 2019

У вас небольшая ошибка, вместо $(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, которыйничего не выберу на вашей странице.С другой стороны, создание текстового узла в jQuery может быть сложным .Поэтому лучше использовать метод добавления jQuery , который допускает использование текста в качестве параметра:

элемент DOM, текстовый узел, массив элементов и текстовых узлов, строка HTML илиjQuery-объект для вставки в конце каждого элемента в наборе соответствующих элементов.

0 голосов
/ 11 июля 2019

да, спасибо, этот код работает. Также у меня была одна маленькая ошибка с двумя брекетами вместо одного. в этой строке $.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>
...