Ajax Call возвратил «неопределенный» - API Companies House

Question

Я получаю данные через API Companies House, и он нормально зацикливается при выводе массива json на страницу, но когда я зацикливаюсь в jQuery, я получаю около 16 неопределенных результатов.Я пытался найти ответ повсюду, но я просто не могу его так обдумать.Моя единственная мысль, что 16 неопределенных похоронены внутри другого объекта?

Буду признателен за любую помощь, код ниже:

jQuery(function($) {
  $('[data-button-search]').click(function(event) {
      var $this = $(this);
      event.preventDefault();
      var value = $('[data-company-id]').val();
      $.ajax({
          type: 'GET',
          url: "https://link.to.site.com/company/"+value+"/name",
          dataType: 'json', // ** ensure you add this line **
          success: function(data){
              $.each(data, function(){
                  $.each(this, function(key, val) {
                      console.log(val.title + " : company number : " + val.company_number);
                      $('[data-select]').append(`
                          <option value='`+key+`'>`+val.title+`</option>
                      `);
                  });
              });
          },
          error: function(XMLHttpRequest, textStatus, errorThrown) {
              console.log("Error!");
          }
      });

  });
});

Пример массива, в результате которого я ввел "AWD" в поле поиска:

{
  "items_per_page": 50,
  "items": [
    {
      "title": "AWD  LTD",
      "description": "11308643 - Incorporated on 13 April 2018",
      "matches": {
        "snippet": [],
        "title": [
          1,
          3
        ]
      },
      "company_type": "ltd",
      "company_status": "active",
      "links": {
        "self": "/company/11308643"
      },
      "company_number": "11308643",
      "description_identifier": [
        "incorporated-on"
      ],
      "address": {
        "locality": "London",
        "postal_code": "WC1N 3AX",
        "premises": "27 ",
        "address_line_1": "Old Gloucester Street",
        "country": "United Kingdom"
      },
      "date_of_creation": "2018-04-13",
      "kind": "searchresults#company",
      "snippet": "",
      "address_snippet": "27  Old Gloucester Street, London, United Kingdom, WC1N 3AX"
    },
  ],
  "kind": "search#companies",
  "start_index": 0,
  "page_number": 1,
  "total_results": 184
}

Вход в консоль

Answer 1

Проблема:

Поведение, которое вы видите, заключается в том, что вы перебираете все свойства возвращаемых данных, а затем пытаетесь перебрать «элементы»свойство каждого.Это приводит к тому, что вы получаете один успешный возврат, а затем 16 (или столько свойств, что у json) неопределенных возвратов.

Решение:

Вместо использования вложенных $.каждый цикл, вы можете рефакторинг этого блока:

success: function(data){
          $.each(data, function(){
              $.each(this, function(key, val) {
                  console.log(val.title + " : company number : " + val.company_number);
                  $('[data-select]').append(`
                      <option value='`+key+`'>`+val.title+`</option>
                  `);
              });
          });
      },

... в гораздо более простую версию:

success: function(data){
            $.each(data.items, function(key, val) {
                console.log(val.title + " : company number : " + val.company_number);
                $('[data-select]').append(`
                    <option value='`+key+`'>`+val.title+`</option>
                `);
              });
      },

В блоке выше, я избавился от вашего внешнего $ .eachцикл и вместо этого изменил свой внутренний цикл на целевой «data.items».

Надеюсь, это поможет.