Loop over javascript object IE8

Question

data is an array of Json data The structure of each object is:

var data = [
{
    id: 0, 
    img: "image_src", 
    width: 107, 
    height: 80, 
    shadowBoxLink: "....",
    th: {
        width: 107,
        height: 70, 
        img: "src"
    }
},
{
    id: 1, 
    img: "image_src", 
    width: 107, 
    height: 80, 
    shadowBoxLink: "....",
    th: {
        width: 107,
        height: 80, 
        img: "src"
    }
}
];

When I try to access the array in a loop (only happens in IE8, IE7) with:

for(var i in data) {
    var imgHeight = data[i].th.height;
}

I got an error message: "Impossible to get property of "height" the reference is null or not defined"

(I translated the message from french: Impossible d’obtenir la propriété « height » d’une référence null ou non définie)

What am I doing wrong?

See edit for another possible issue.

Chris
– Chris

2013-03-20 11:40:38 +00:00
Commented Mar 20, 2013 at 11:40 — Chris
– Chris, Commented Mar 20, 2013 at 11:40

Chris · Accepted Answer · 2013-03-20 11:40:20Z

8

Accessing array elements can be done more semantically like this:

for(var i = 0, n = data.length; i < n; i ++) {
    var imgHeight = data[i].th.height;
    ...
}

for..in loops are meant to be used with key-based objects.

NOTE: you also have a missing closing quote in your object:

th: Object {
   width: 107,
   height: 80, 
   img: "src /* NEED A CLOSING " HERE */
}

edited Mar 20, 2013 at 11:40

answered Mar 20, 2013 at 11:28

Chris

27k6 gold badges61 silver badges72 bronze badges

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

4 Comments

Chris Over a year ago

@RobW The structure elaborated in the question is the structure of each object in the array (data); i.e., data is an array of objects.

Alucard Over a year ago

Thx @Abody97, the quote I just forgot to put it here but it exists in the original code

Alucard Over a year ago

I tried the loop you suggested, no errors, but nothing is displayed as well, I'm trying to debug it to see if I have a problem somewhere else

Chris Over a year ago

@vladimire I'm thinking it is a bug somewhere else, since the errors went away.

user2050799 · Accepted Answer · 2013-03-20 11:32:41Z

2

It seems you're looking for the property somewhere it doesn't exist

Make a simple test:

for(var i in data) {
  if(data[i] && data[i].th && data[i].th.height){
    console.log('the property exists');
  }else{
    console.log("no, it doesn't")
  }      
}

answered Mar 20, 2013 at 11:32

user2050799

4 Comments

Chris Over a year ago

I don't think the issue is with the object itself, since the asker said he's only getting the error in IE.

Diode Over a year ago

your approach is correct, but here the problem is different. Please check @Abody97's answer

Alucard Over a year ago

I tried you approach, I get 'the property exists' except for the last one ! it's like there is an an empty entry in the array

user2050799 Over a year ago

Well, yes @Abody97 answer says it all. Since you're using for in IE is iterating not only the arrays content but other properties as well and they don't have th.height ofcourse. So use for() loop

Sasidhar Vanga · Accepted Answer · 2013-03-20 11:46:01Z

0

There is an array of objects.

So, use for and get the required object's property.

There is a syntax error in the given code. Close the string with quotes.

Example code is here.

var data = [
    {
        id: 0, 
        img: "image_src1", 
        width: 107, 
        height: 80, 
        shadowBoxLink: "....",
        th: {
            width: 107,
            height: 70, 
            img: "src"
        }
    },
    {
        id: 1, 
        img: "image_src2", 
        width: 107, 
        height: 80, 
        shadowBoxLink: "....",
        th: {
            width: 107,
            height: 40, 
            img: "src"
        }
    }
];

for(var i=0; i<data.length; i++) {
    var imgHeight = data[i].th.height;
    alert(imgHeight);
}

edited Mar 20, 2013 at 11:46

answered Mar 20, 2013 at 11:35

Sasidhar Vanga

3,4042 gold badges29 silver badges47 bronze badges

1 Comment

Alucard Over a year ago

but i'm trying to access the property "height" inside th ?

Collectives™ on Stack Overflow

Loop over javascript object IE8

3 Answers 3

4 Comments

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related