在带有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;
  }
});

叉子