jQuery $.ajax и $.each перебирают массив

Я звоню в API поиска статей NY Times и хочу добавить его к элементу HTML в качестве нового элемента списка. Однако у меня возникают проблемы с использованием функции $.each() и повторением данных JSON. Я пытаюсь опубликовать гиперссылку и фрагмент статьи.

Я получаю сообщение об ошибке «Uncaught SyntaxError: Unexpected token» в data.response в «$.each(data, function(i, data.response)»

$.ajax({
  url: url,
  method: 'GET',
}).done(function(data) {
  $.each(data, function(i, data.response){
    $.each(data.response.docs, function(index, object){
      $nytElem.append('<li class ="article">'+
      '<a href='+ data.response.docs[index].web_url +'>' + data.response.docs[index].headline.main +
      '</a><p>' + data.response.docs[index].snippet + '</p></li>')
    });
  });
  console.log(data);
}).fail(function(err) {
  throw err;
});

API возвращает объект с массивом, содержащим информацию для 10 статей. Я только разместил 2 здесь для краткости. Любая помощь будет оценена по достоинству!

    {
      "status": "OK",
      "copyright": "Copyright (c) 2017 The New York Times Company. All Rights Reserved.",
      "response": {
        "docs": [
          {
            "web_url": "https://www.nytimes.com/aponline/2017/09/05/world/asia/ap-as-taiwan-politics.html",
            "snippet": "Taiwan's president has appointed a new premier seen as willing to reach out to rival China amid ongoing tense relations.",
            "blog": {},
            "source": "AP",
            "multimedia": [],
            "headline": {
              "main": "Taiwan Appoints New Premier Amid Tense China Relations",
              "print_headline": "Taiwan Appoints New Premier Amid Tense China Relations"
            },
            "keywords": [],
            "pub_date": "2017-09-05T06:06:43+0000",
            "document_type": "article",
            "new_desk": "None",
            "section_name": "Asia Pacific",
            "byline": {
              "original": "By THE ASSOCIATED PRESS"
            },
            "type_of_material": "News",
            "_id": "59ae3f007c459f246b621bb9",
            "word_count": 131,
            "score": 1,
            "uri": "nyt://article/ae5b0e41-75b2-5a7e-972d-8a76bcd5c11a"
          },
          {
            "web_url": "https://www.nytimes.com/reuters/2017/09/05/business/05reuters-hyundai-motor-china.html",
            "snippet": "South Korea's Hyundai Motor said it had suspended production at one of its China factories on Tuesday after a supplier refused to provide parts due to delays in payment - its second such incident in as many weeks.",
            "blog": {},
            "source": "Reuters",
            "multimedia": [],
            "headline": {
              "main": "Hyundai Hit Again by Supply Disruption in China, One Plant Halted",
              "print_headline": "Hyundai Hit Again by Supply Disruption in China, One Plant Halted"
            },
            "keywords": [],
            "pub_date": "2017-09-05T06:03:30+0000",
            "document_type": "article",
            "new_desk": "None",
            "byline": {
              "original": "By REUTERS"
            },
            "type_of_material": "News",
            "_id": "59ae3e427c459f246b621bb8",
            "word_count": 516,
            "score": 1,
            "uri": "nyt://article/c519de15-1040-5fc7-b1ad-8e73aed33a47"
          }
       ],
       "meta": {
         "hits": 16210307,
         "offset": 0,
         "time": 1016
        }
     }
  }

person 000    schedule 05.09.2017    source источник
comment
Где $.getJSON? Где вы разбираете указанный JSON, если не используете $.getJSON?   -  person Script47    schedule 05.09.2017
comment
@ Script47 Речь идет о $.ajax. Отредактировал заголовок.   -  person 000    schedule 05.09.2017
comment
Какой именно URL вы используете? Вы можете быть заблокированы той же политикой происхождения   -  person Rory McCrossan    schedule 05.09.2017
comment
Консоль выдает ошибки?   -  person Script47    schedule 05.09.2017
comment
@Script47 Ошибка Uncaught SyntaxError: Неожиданный токен в data.response в $.each(data, function(i, data.response)   -  person 000    schedule 05.09.2017
comment
Разве вы не должны были предоставить это?   -  person Script47    schedule 05.09.2017
comment
@Script47 Что ты имеешь в виду?   -  person 000    schedule 05.09.2017
comment
Разве вы не должны были сказать нам, что консоль изначально показывает эту ошибку, чтобы мы не догадывались, что случилось?   -  person Script47    schedule 05.09.2017
comment
@Script47 Да. Я отредактировал свой пост, чтобы включить ошибку.   -  person 000    schedule 05.09.2017


Ответы (1)


Это все, что вам нужно:

.done(function(data) {
    $.each(data.response.docs, function(i, doc) {
        var $a = $('<a>').attr("href", doc.web_url).html(doc.headline.main);
        var $p = $('<p>').html(doc.snippet);
        var $li = $('<li>').addClass("article").append($a).append($p);
        $nytElem.append($li);
    });
});

Второй параметр функции, которую вы передаете $.each(), будет содержать каждый элемент массива, который вы передали. Итак, что вы делаете, это передаете data.response.docs, который представляет собой массив статей, затем используете doc (или аналогичный) в качестве параметра и doc.[node] для доступа к объекту и его дочерним элементам внутри массива.

person Chris G    schedule 05.09.2017
comment
@ 000 Кстати, в JS для этого есть встроенная функция: data.response.docs.forEach(function(doc) { ... }); - person Chris G; 05.09.2017