using .each to loop through Json Response

Question

I'm trying to loop through a json object with .each(), but I'm struggling with getting the syntax right.

Ajax Call, which results in "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');
    }
  });
});

if I just call alert(display[i]); my json object looks like this:

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

I have also tried to nest another .each() loop, but I get the response: Uncaught TypeError: Cannot use 'in' operator to search for '17381'

I have looked through several SO answers and tried various styles of .each loops, but I always get an undefined error.

What am I missing?

EDIT I am constructing json like this on backend:

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

sorry, my answer was incorrect at first. It should be good now — AmmarCSE
– AmmarCSE, Commented May 24, 2015 at 4:18

Akash Rajbanshi · Accepted Answer · 2015-05-24 04:27:06Z

6

You can access the each loop this way:

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

DEMO

edited May 24, 2015 at 4:27

answered May 24, 2015 at 4:15

Akash Rajbanshi

1,60314 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

retrograde Over a year ago

your answer looks very straightforward and works in the demo. But my alert now returns: {"members":"{\"total\":134,\"per_page\":15,\"current_page\":1,\"last_page\":9,\"from\":1,\"to\":15,\"data\": ... am I constructing the json object wrong?

Akash Rajbanshi Over a year ago

sorry about the link...you can check your validity of json here : jsonlint.com

retrograde Over a year ago

thank you for the help. Your solution worked, once I sorted out my json construction issues. Your help is very much appreciated!

Random Identity · Accepted Answer · 2015-05-24 05:01:26Z

I think the better approach would be using vanilajs( pure javascript ) , because jQuery $.each very slow compare to vanilajs for loop. So I have given a sample it works and please let me know if face any problem understanding the solution.

Here is an example that how fast is regular javascript (thus vanilajs loop) performs 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);
      }
    }
  }
}

AmmarCSE · Accepted Answer · 2015-05-24 04:16:03Z

2

company_name is a nested property.

You can access it like

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

or if you use $.each on the display['data'] array itself

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

edited May 24, 2015 at 4:16

answered May 24, 2015 at 4:08

AmmarCSE

30.7k6 gold badges48 silver badges53 bronze badges

4 Comments

retrograde Over a year ago

when I try either option, console shows: {"members":"{\"total\":134,\"per_page\":15,\"current_page\":1,\"last_page\":9,\"from\":1,\"to\":15,\"data\": ...

retrograde Over a year ago

Maybe the problem is how Im constructing my json? I'll edit my question to show that

AmmarCSE Over a year ago

@retrograde, if you run the snippet in my answer, it should show: test

AmmarCSE Over a year ago

@retrograde, yes, it may have to do with how the json is constructed

Sumant · Accepted Answer · 2015-06-16 12:11:56Z

2

This should do the trick for you

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

You need to iterate over data object instead of display object.

Fiddle Link:- Demo

edited Jun 16, 2015 at 12:11

answered May 24, 2015 at 4:38

Sumant

1344 bronze badges

Comments

Cutting Edge Hobbies · Accepted Answer · 2016-02-18 03:12:15Z

-1

This worked for me

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

answered Feb 18, 2016 at 3:12

Cutting Edge Hobbies

995 bronze badges

Collectives™ on Stack Overflow

using .each to loop through Json Response

5 Answers 5

3 Comments

Comments

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related