javascript - .ajax JSON 类型错误 : Cannot read property 'length' of undefined

Question

我正在使用一个 HTML 页面，该页面有两个输入框，分别用于起始地址和目标地址。

当用户提交条目时(单击按钮)，我将使用一些 JavaScript 捕获这些条目。响应是来自 Googlemaps Distance Matrix API 的 JSON。

我在提取持续时间和距离的值时遇到了困难，因为它们的嵌套方式我(显然)无法理解。

当我输入数据并启动脚本时，我得到:

TypeError: Cannot read property 'length' of undefined

我确信当我得到我想要的响应并可以将其打印到控制台时，输入框会被正确捕获。我想获取持续时间和距离值，以便可以在 HTML 中显示它们。

在其他地方阅读此错误后，我明白(我认为)我没有正确定义origins，但不知道如何解决它。

我希望有人可以帮助我让这个功能正常工作，并建议我如何在 HTML 上的 div 中显示距离和持续时间值。

这是我的 JavaScript:

$(document).ready(function() {
  console.log("ready!");

  $('#try-again').hide();

  // on form submission ...
  $('form').on('submit', function() {

    console.log("the form has beeen submitted");

    // grab values
    origin = $('input[name="origin"]').val();
    destination = $('input[name="destination"]').val();
    console.log(origin, destination)

    $.ajax({
      type: "POST",
      url: "/",
      data : { 'origin': origin, 'destination': destination },
      success: function(data) {
        var origins = data.originAddresses;
        var destinations = data.destinationAddresses;
        for (var i = 0; i < origins.length; i++) {
          var results = data.rows[i].elements;
          for (var j = 0; j < results.length; j++) {
            var element = results[j];
            var distance = element.distance.text;
            var duration = element.duration.text;
            var from = origins[i];
            var to = destinations[j];
          }
        }
       console.log(distance, duration);
      },
      error: function(error) {
        console.log(error)
      }
    });

  });

  $('#try-again').on('click', function(){
    $('input').val('').show();
    $('#try-again').hide();
    $('#results').html('');
  });

}); 

这是我正在使用的 JSON 响应结构:

{
  "originAddresses": [ "Greenwich, Greater London, UK", "13 Great Carleton Square, Edinburgh, City of Edinburgh EH16 4, UK" ],
  "destinationAddresses": [ "Stockholm County, Sweden", "Dlouhá 609/2, 110 00 Praha-Staré Město, Česká republika" ],
  "rows": [ {
    "elements": [ {
      "status": "OK",
      "duration": {
        "value": 70778,
        "text": "19 hours 40 mins"
      },
      "distance": {
        "value": 1887508,
        "text": "1173 mi"
      }
    }, {
      "status": "OK",
      "duration": {
        "value": 44476,
        "text": "12 hours 21 mins"
      },
      "distance": {
        "value": 1262780,
        "text": "785 mi"
      }
    } ]
  }, {
    "elements": [ {
      "status": "OK",
      "duration": {
        "value": 96000,
        "text": "1 day 3 hours"
      },
      "distance": {
        "value": 2566737,
        "text": "1595 mi"
      }
    }, {
      "status": "OK",
      "duration": {
        "value": 69698,
        "text": "19 hours 22 mins"
      },
      "distance": {
        "value": 1942009,
        "text": "1207 mi"
      }
    } ]
  } ]
}

Answer 1

我怀疑您的 ajax 调用返回的数据不完整、为空或有问题。我会将你的循环包装在一个保护语句中，并检查是否未定义，如下所示:

success: function(data) {
    var origins = data.originAddresses;
    var destinations = data.destinationAddresses;
    if (typeof origins !== "undefined") {
        for (var i = 0; i < origins.length; i++) {
          var results = data.rows[i].elements;
          for (var j = 0; j < results.length; j++) {
            var element = results[j];
            var distance = element.distance.text;
            var duration = element.duration.text;
            var from = origins[i];
            var to = destinations[j];
          }
        }
    }
    console.log(distance, duration);
},