使用 .each 循环遍历 Json 响应

Question

我想使用.each()函数遍历一个JSON对象，但我在语法上遇到了困难。

Ajax调用结果为"undefined":

$('.showGroup a').on('click', function(e) {
e.preventDefault();
    var _href = $(this).attr("href");
     $.ajax({
       dataType: 'json',
       url : _href,
       type : 'GET',
       success : function(response) {
          $("#replace").empty();
          display = response;
        $.each(display, function(i, member) {
            alert(display[i].company_name);
        });
     },
    error : function() {
        console.log('error');
    }
  });
});

如果我只是调用alert(display[i])，我的JSON对象看起来像这样：

{"total":134,"per_page":15,"current_page":1,"last_page":9,"from":1,"to":15,"data":[{"id":"89","company_name":"test" ...

我也尝试嵌套另一个 .each() 循环，但是我收到了这个响应：Uncaught TypeError: Cannot use 'in' operator to search for '17381'

我查看了几个SO答案，并尝试了各种样式的 .each 循环，但我总是得到未定义错误。

我错过了什么？

编辑 我正在后端构建类似这样的 JSON：

$members = $this->user->getMemberIds($loggedIn->id, $display, $associationFilter);
           $this->arrResponse['members'] = $members->toJson();
return Response::json($this->arrResponse);

- retrograde

---

抱歉，我的答案一开始是不正确的。现在应该没问题了。 - AmmarCSE

Answer 1

我认为更好的方法是使用vanilajs（纯JavaScript），因为与vanilajs for循环相比，jQuery $.each非常慢。所以我提供了一个示例，它可以正常工作，请让我知道是否有任何理解该解决方案的问题。

下面是一个示例，展示了普通JavaScript（即vanilajs循环）的速度有多快：https://jsperf.com/jquery-each-vs-for-loop/6

var i = 0,
  j = 0;
var items = [{
  "total": 55,
  "to": 22,
  "data": [{
    "id": "89",
    "company_name": "CompanyName 1"
  }, {
    "id": "89.1",
    "company_name": "CompanyName 1.1"
  }]
}, {
  "total": 51,
  "to": 22,
  "data": [{
    "id": "90",
    "company_name": "CompanyName 2"
  }, {
    "id": "90.1",
    "company_name": "CompanyName 2.1"
  }]
}];

var isEmpty = function(variable) {
  return variable === undefined || variable === null || variable === '' || variable.length === 0;
}


// jquery foreach is very slow, 
// it is always recommended to use valinajs for loop(where jQuery is not necessary)

for (i = 0; i < items.length; i++) {
  if (isEmpty(items[i].data) === false) {
    // data exist
    for (j = 0; j < items[i].data.length; j++) {
      if (isEmpty(items[i].data[j].company_name) === false) {
        // company exist
        console.log(items[i].data[j].company_name);
      }
    }
  }
}

- Random Identity

Answer 2

你可以通过以下方式访问每个循环：

$.each(display, function (i, member) {
for (var i in member) {
    alert("Company Name: " + member[i].company_name);
 }
});

DEMO

- Akash Rajbanshi

---

你的答案看起来非常简单明了，并且在演示中也能正常工作。但是我的警告现在返回：{"members":"{"total":134,"per_page":15,"current_page":1,"last_page":9,"from":1,"to":15,"data": ... 我构建 JSON 对象的方式有问题吗？ - retrograde

抱歉关于链接的问题...您可以在此处检查JSON的有效性：http://jsonlint.com/ - Akash Rajbanshi

非常感谢您的帮助。一旦我解决了JSON构建问题，您提供的解决方案就起作用了。非常感激您的帮助！ - retrograde

Answer 3

company_name是一个嵌套属性。

你可以像这样访问它：

$.each(display, function(i, member) {
    if (i == 'data') {
        console.log(display[i][0]['company_name']);
    }
});

如果你在display['data']数组本身上使用$.each

$.each(display['data'], function(i, member) {
    console.log($(this)[0]['company_name']);
});

var display = {
    "total": 134,
    "per_page": 15,
    "current_page": 1,
    "last_page": 9,
    "from": 1,
    "to": 15,
    "data": [{
        "id": "89",
        "company_name": "test"
    }]
};

$.each(display, function(i, member) {
    if (i == 'data') {
        console.log(display[i][0]['company_name']);
    }
});

$.each(display['data'], function(i, member) {
    console.log($(this)[0]['company_name']);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

- AmmarCSE

---

当我尝试任何一种选项时，控制台显示：{"members":"{"total":134,"per_page":15,"current_page":1,"last_page":9,"from":1,"to":15,"data": ... - retrograde

也许问题出在我构建JSON的方式上了？我会编辑我的问题以展示这一点。 - retrograde

@retrograde，如果您运行我回答中的代码片段，它应该显示：test - AmmarCSE

@retrograde，是的，这可能与json的构造方式有关。 - AmmarCSE

Answer 4

这应该能为您解决问题。

$.each(display.data,function(i,member){
    console.log(member.id+":"+member.company_name);
});

你需要遍历数据对象而不是显示对象。

示例链接： Demo

- Sumant

Answer 5

这对我有用

success : function(json) {
    var obj = JSON.parse(JSON.stringify(json));
        display = obj;
            $.each(display, function(i) {
                alert(display[i].secretQuestion);
            });
}

- Cutting Edge Hobbies