问题 使用.each循环遍历Json Response


我试图用.each()循环一个json对象,但我正在努力使语法正确。

Ajax调用,导致“未定义”:

$('.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');
    }
  });
});

如果我只是呼叫警报(显示[i]);我的json对象看起来像这样:

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

我也尝试嵌套另一个.each()循环,但我得到了响应:未捕获TypeError:无法使用'in'运算符来搜索'17381'

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

我错过了什么?

编辑 我在后端构建这样的json:

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

7581
2018-05-24 04:04


起源

对不起,我的回答一开始不对。现在应该很好 - AmmarCSE


答案:


您可以通过以下方式访问每个循环:

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

DEMO


5
2018-05-24 04:15



您的答案看起来非常简单,并且可以在演示中使用。但我的警报现在返回:{“members”:“{\”total \“:134,\”per_page \“:15,\”current_page \“:1,\”last_page \“:9,\”from \“ :1,\“to \”:15,\“data \”:...我构建json对象错了吗? - retrograde
抱歉链接...你可以在这里查看你的json的有效性: jsonlint.com - Akash Rajbanshi
感谢您的帮助。一旦我解决了我的json构造问题,你的解决方案就有效了。非常感激你的帮助! - retrograde


我认为更好的方法是使用vanilajs(纯javascript),因为 jQuery $ .each非常慢 比较vanilajs for loop。所以我给出了一个可行的样本,如果您对解决方案有任何疑问,请告诉我。

这是一个例子,常规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);
      }
    }
  }
}


5
2018-05-24 05:01





company_name 是一个嵌套属性。

你可以像访问它一样

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

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

$.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>


2
2018-05-24 04:08



当我尝试任一选项时,控制台显示:{“members”:“{\”total \“:134,\”per_page \“:15,\”current_page \“:1,\”last_page \“:9,\”从\“:1,\”到\“:15,\”data \“:... - retrograde
也许问题是我如何构建我的json?我会编辑我的问题来表明这一点 - retrograde
@retrograde,如果你在我的回答中运行片段,它应该显示:test - AmmarCSE
@retrograde,是的,它可能与json的构造方式有关 - AmmarCSE


这应该是你的伎俩

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

您需要迭代数据对象而不是显示对象。

小提琴链接: - 演示


2
2018-05-24 04:38





这对我有用

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

-1
2018-02-18 03:12