时间戳

首页 > 解决方案 > Ajax 调用返回“未定义” - Companies House API

jquery - Ajax 调用返回“未定义” - Companies House API

问题描述

我通过 Companies House API 获取数据，当我在页面上输出 json 数组时它循环正常，但是当我在 jQuery 中循环它时，我得到大约 16 个未定义的结果。我试图到处寻找答案，但我似乎无法如此怀疑。我唯一的想法是 16 undefined 被埋在另一个对象中？

任何帮助将不胜感激，代码如下：

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
}

登录控制台

安慰

标签： jqueryajax

解决方案

问题：

您看到的行为是因为您正在迭代返回数据的所有属性，然后尝试迭代每个属性的“项目”属性。这将导致您获得一个成功的回报，然后 16 个（或 json 具有的许多属性）未定义的回报。

解决方案：

您可以重构此块，而不是使用嵌套的 $.each 循环：

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”。

希望有帮助。

推荐阅读