在帶有JSON對象的jQuery中使用.each時，如何避免未定義的屬性？

Question

我正在嘗試使用JSON對象中的數據填充頁面上<inputs>的值。

http://codepen.io/jimmykup/pen/exAip?editors=101

首先，我創建我的JSON對象。 在這種情況下，它只有兩個值。 一個name和一個url 。

var jsonObj = [];

var name = "1stname";
var url = "firsturl";

item = {}
item ["name"] = name;
item ["url"] = url;

jsonObj.push(item);

接下來，我使用jQuery的.each（）查找具有.name類的所有輸入，並使用index將“ name”的值插入輸入中。 之后，我要使用.url作為類名瀏覽所有輸入，並執行相同的操作。

$("input.name").each(function( index ) {
    if ( jsonObj[index].name ) {
      $(this).val( jsonObj[index].name );
  }
});

$("input.url").each(function( index ) {
    if ( jsonObj[index].url ) {
      $(this).val( jsonObj[index].url );
  }
});

問題是，如果我的JSON對象的“名稱”值為1，但是.each()找到2個輸入，一旦到達第二個輸入，我就會在控制台中收到此錯誤。

Uncaught TypeError: Cannot read property 'name' of undefined

然后，我的第二個.each（）函數無法運行。 我應該怎么做才能避免這個問題？

Answer 1

在嘗試獲取name或url之前，需要確保定義了jsonObj[index] 。

$("input.name").each(function( index ) {
  var data = jsonObj[index];
  if ( data && data.name ) {
    $(this).val( data.name );
  }
});

$("input.url").each(function( index ) {
  var data = jsonObj[index];
  if ( data && data.url ) {
    $(this).val( data.url );
  }
});

Answer 2

Json objet的格式如下：

var jsonobj={"name":"1stname","url":"firsturl"};

使用這種格式，您可以執行代碼。

而您所形成的基本上是一個數組。

Answer 3

檢查索引是否小於數組的長度，否則退出循環：

$("input.name").each(function( index ) {
  if (index < jsonObj.length && jsonObj[index].name ) {
    $(this).val( jsonObj[index].name );
  } else {
    return false;
  }
});

$("input.url").each(function( index ) {
  if ( index < jsonObj.length && jsonObj[index].url ) {
    $(this).val( jsonObj[index].name );
  } else {
    return false;
  }
});

叉子