Can't loop through list with jquery

Question

I defined a JSON like this:

 data = [ {"tile1": {"y": 212, "x": 392, "hp": true}, "index": "1", "tile3": {"y": 415, "x": 794, "hp": true}, "tile2": {"y": 415, "x": 793, "hp": true}, "tile5": {"y": 415, "x": 796, "hp": true}, "tile4": {"y": 415, "x": 795, "hp": true}, "tile7": {"y": 416, "x": 792, "hp": true}, "tile6": {"y": 415, "x": 797, "hp": true}, "tile9": {"y": 416, "x": 794, "hp": true}, "tile8": {"y": 416, "x": 793, "hp": true}, "zoom": " 10", "tile11": {"y": 416, "x": 796, "hp": true}, "tile10": {"y": 416, "x": 795, "hp": true}, "tile12": {"y": 416, "x": 797, "hp": true}}, {"tile1": {"y": 416, "x": 792, "hp": true}, "index": "2", "tile3": {"y": 415, "x": 794, "hp": true}, "tile2": {"y": 415, "x": 793, "hp": true}, "tile5": {"y": 415, "x": 796, "hp": true}, "tile4": {"y": 415, "x": 795, "hp": true}, "tile7": {"y": 416, "x": 792, "hp": true}, "tile6": {"y": 415, "x": 797, "hp": true}, "tile9": {"y": 416, "x": 794, "hp": true}, "tile8": {"y": 416, "x": 793, "hp": true}, "zoom": " 10", "tile11": {"y": 416, "x": 796, "hp": true}, "tile10": {"y": 416, "x": 795, "hp": true}, "tile12": {"y": 416, "x": 797, "hp": true}} ];

So I want to go through each element inside this and I want to get x and y inside each item inside all elements of data. I did a function like this:

function loopRespData(respData){
    for (var i=0; i < respData.length; i++) {
        var item = respData[i];
        for (var j=0; j < item.length; j++) {
            var item2 = item[j]
            console.log("""X:", item[x] , "Y": item[y]);
        }  
    }
}
loopRespData(data);

But the console doesn't show anything because the second loop is not executed at all? Can someone help me on this, please? I just need to get the value of x, y and hp. JSFIDDLE

why do you use enumerated properties (tile1, tile2, ...) instead of an Array? — Thomas
– Thomas, Commented Aug 28, 2016 at 15:12

Rafi Ud Daula Refat · Accepted Answer · 2016-08-28 15:26:22Z

2

here item is an object not an array so do

    for(var key in item) {
      if (item.hasOwnProperty(key)) {
        var item2 = item[key];
        console.log("X:"+ item2.x + " Y"+ item2.y);
      }
    }

in place of

    for (var j=0; j < item.length; j++) {
        var item2 = item[j]
        console.log("X:" + item[i].x + " Y" + item[j].y);
    }

the full code is

function loopRespData(respData){
console.log(respData);
    for (var i=0; i < respData.length; i++) {
        var item = respData[i];
        for(var key in item) {
          if (item.hasOwnProperty(key)) {
            var item2 = item[key];
            if (item2.hasOwnProperty('x')&& item2.hasOwnProperty('y'))
              console.log("X:"+ item2.x + " Y"+ item2.y);
          }
        }
    }
}
var  data = [ {"tile1": {"y": 212, "x": 392, "hp": true}, "index": "1", "tile3": {"y": 415, "x": 794, "hp": true}, "tile2": {"y": 415, "x": 793, "hp": true}, "tile5": {"y": 415, "x": 796, "hp": true}, "tile4": {"y": 415, "x": 795, "hp": true}, "tile7": {"y": 416, "x": 792, "hp": true}, "tile6": {"y": 415, "x": 797, "hp": true}, "tile9": {"y": 416, "x": 794, "hp": true}, "tile8": {"y": 416, "x": 793, "hp": true}, "zoom": " 10", "tile11": {"y": 416, "x": 796, "hp": true}, "tile10": {"y": 416, "x": 795, "hp": true}, "tile12": {"y": 416, "x": 797, "hp": true}}, {"tile1": {"y": 416, "x": 792, "hp": true}, "index": "2", "tile3": {"y": 415, "x": 794, "hp": true}, "tile2": {"y": 415, "x": 793, "hp": true}, "tile5": {"y": 415, "x": 796, "hp": true}, "tile4": {"y": 415, "x": 795, "hp": true}, "tile7": {"y": 416, "x": 792, "hp": true}, "tile6": {"y": 415, "x": 797, "hp": true}, "tile9": {"y": 416, "x": 794, "hp": true}, "tile8": {"y": 416, "x": 793, "hp": true}, "zoom": " 10", "tile11": {"y": 416, "x": 796, "hp": true}, "tile10": {"y": 416, "x": 795, "hp": true}, "tile12": {"y": 416, "x": 797, "hp": true}} ];
loopRespData(data);

Here is the fiddle

https://jsfiddle.net/Refatrafi/8hw64pgt/11/

edited Aug 28, 2016 at 15:26

answered Aug 28, 2016 at 15:12

Rafi Ud Daula Refat

2,25520 silver badges28 bronze badges

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

2 Comments

xesa Over a year ago

thank you very much for your answer. I have another question? As you can see there are some values like index and zoom, how can i ignore those, since when i execute this code I get un undefined?

Rafi Ud Daula Refat Over a year ago

i have edited that. you can check again with object.hasOwnProperty('x') and object.hasOwnProperty('y') for that.

Freyja · Accepted Answer · 2016-08-28 15:08:48Z

2

item is an object, not an array. You can't iterate over an object like that. (Strictly speaking, item.length is undefined since it's not an array, so j < item.length is always false).

Instead, the traditional way to iterate over an object is to use a for..in loop:

for(var key in item) {
  if(!item.hasOwnProperty(key)) continue;

  // key is "tile1", "tile2", "tile3", etc.
  var item2 = item[key]; // item2 is now { "x": ..., "y": ..., "hp": ... }
}

answered Aug 28, 2016 at 15:08

Freyja

41.3k9 gold badges89 silver badges130 bronze badges

Comments

Whothehellisthat · Accepted Answer · 2016-08-28 15:08:47Z

1

The first loop goes through each item. Each item looks like: {"tile1": {"y": 212, "x": 392, "hp": true}, "index": "1" ...} So there is no length property to read.

Also, the second loop counts through integers (1, 2, 3...) and tried to get a property on the first item called that. There are no properties on that first item that are called "1", "2", "3"...

Also there are a few typos dotted throughout which don't help. You can use dev tools to see the errors created by the typos.

answered Aug 28, 2016 at 15:08

Whothehellisthat

2,1521 gold badge15 silver badges15 bronze badges

Comments

Nenad Vracar · Accepted Answer · 2016-08-28 15:15:20Z

You can use forEach() loop and Object.keys()

 var  data = [{"square1":{"y":212,"x":392,"hp":true},"index":"1","square3":{"y":415,"x":794,"hp":true},"square2":{"y":415,"x":793,"hp":true},"square5":{"y":415,"x":796,"hp":true},"square4":{"y":415,"x":795,"hp":true},"square7":{"y":416,"x":792,"hp":true},"square6":{"y":415,"x":797,"hp":true},"square9":{"y":416,"x":794,"hp":true},"square8":{"y":416,"x":793,"hp":true},"zoom":" 10","square11":{"y":416,"x":796,"hp":true},"square10":{"y":416,"x":795,"hp":true},"square12":{"y":416,"x":797,"hp":true}},{"square1":{"y":416,"x":792,"hp":true},"index":"2","square3":{"y":415,"x":794,"hp":true},"square2":{"y":415,"x":793,"hp":true},"square5":{"y":415,"x":796,"hp":true},"square4":{"y":415,"x":795,"hp":true},"square7":{"y":416,"x":792,"hp":true},"square6":{"y":415,"x":797,"hp":true},"square9":{"y":416,"x":794,"hp":true},"square8":{"y":416,"x":793,"hp":true},"zoom":" 10","square11":{"y":416,"x":796,"hp":true},"square10":{"y":416,"x":795,"hp":true},"square12":{"y":416,"x":797,"hp":true}}]

data.forEach(function(o) {
  Object.keys(o).forEach(function(e) {
    if(e.match(/^square/)) console.log("X:" + o[e].x + ' , ' + "Y: " + o[e].y + ' , hp: ' + o[e].hp);
  })
})

Collectives™ on Stack Overflow

Can't loop through list with jquery

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related