How to access property of array of objects

Question

I know I must be missing something very basic here, but I could do with a pair of fresh eyes.

I have an array of objects (see code).

I'm trying to read the values of property variants of each object.

I've tried many combinations. For one, if I do object.variants or object[0].variants, the result is undefined.

Can anybody tell me why please?

Update: I need to loop through the objects in the array and check, for each of them, the variants property. If it's not null then grab its values and log them.

   [
    {
        "type": "text",
        "complete": true,
        "startPoint": {
            "x": 233.84,
            "y": 82.13
        },
        "endPoint": {
            "x": 461.27,
            "y": 79.74
        },
        "text": "xvxvs xsvx vx",
        "variants": [
            "xvxvs",
            "xsvx",
            "vx"
        ]
    },
    {
        "type": "text",
        "complete": true,
        "startPoint": {
            "x": 515.39,
            "y": 120.84
        },
        "endPoint": {
            "x": 803.67,
            "y": 111.31
        },
        "text": "casdc adcasdcasc",
        "variants": [
            "casdc",
            "adcasdcasc"
        ]
    }
]

What exactly do you want to do with the values of the objects? Put them into another array? – have a look at Array.prototype.map. Just get the property of the first object? – Let's say, your array is called arr, then it would be arr[0].variants. — nils
– nils, Commented Nov 7, 2015 at 21:06

Darin Dimitrov · Accepted Answer · 2015-11-07 21:05:33Z

3

Well assuming that you have a javascript variable with this contents:

var obj = 
    [
        {
            "type": "text",
            "complete": true,
            "startPoint": {
                "x": 233.84,
                "y": 82.13
            },
            "endPoint": {
                "x": 461.27,
                "y": 79.74
            },
            "text": "xvxvs xsvx vx",
            "variants": [
                "xvxvs",
                "xsvx",
                "vx"
            ]
        },
        {
            "type": "text",
            "complete": true,
            "startPoint": {
                "x": 515.39,
                "y": 120.84
            },
            "endPoint": {
                "x": 803.67,
                "y": 111.31
            },
            "text": "casdc adcasdcasc",
            "variants": [
                "casdc",
                "adcasdcasc"
            ]
        }
    ];

then you can access the variants contents like this:

alert(obj[0].variants);

and here's a working demo of it: http://jsfiddle.net/66o8h5de/

So basically obj is an array and obj[0] represents the first element of this array and obj[0].variants is the variants property of the first element of this array. Of course depending on your needs you might want to loop over the elements of this obj array in which case you could use a for loop:

for(var i = 0; i < obj.length; i++) {
    var element = obj[i];
    alert(element.variants);
}

answered Nov 7, 2015 at 21:05

Darin Dimitrov

1.0m276 gold badges3.3k silver badges3k bronze badges

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

2 Comments

U r s u s Over a year ago

Thanks, the problem was indeed not having variable name. I've update my question with what I want to achieve, so perhaps your answer can be more specific (obviously my fault for not making the question clear in the first place).

Darin Dimitrov Over a year ago

Well, once you have a variable name pointing to this javascript object array you can loop through its contents using the for loop as shown in my answer and then accessing each individual element of this array: var element = obj[i];

Rashad Ibrahimov · Accepted Answer · 2015-11-07 21:09:23Z

1

You can use forEach() function like this jsfiddle

objects.forEach(function(element, index, array) {
   console.log(element.variants); 
});

answered Nov 7, 2015 at 21:09

Rashad Ibrahimov

3,3193 gold badges21 silver badges41 bronze badges

Comments

ThisClark · Accepted Answer · 2015-11-07 21:12:12Z

1

You have an array of objects where each object includes keys for more arrays. A method that uses forEach to iterate over your objects and then again for your variant arrays:

var array = [{"type":"text","complete":true,"startPoint":{"x":233.84,"y":82.13},"endPoint":{"x":461.27,"y":79.74},"text":"xvxvs xsvx vx","variants":["xvxvs","xsvx","vx"]},{"type":"text","complete":true,"startPoint":{"x":515.39,"y":120.84},"endPoint":{"x":803.67,"y":111.31},"text":"casdc adcasdcasc","variants":["casdc","adcasdcasc"]}]

array.forEach(function(element) {
  variantArray = element.variants;
  variantArray.forEach(function(variant) {
    document.write(variant + "<br>");  
  });
  document.write("<br>");
});

answered Nov 7, 2015 at 21:12

ThisClark

14.9k11 gold badges73 silver badges103 bronze badges

Comments

Ramanlfc · Accepted Answer · 2015-11-07 21:06:05Z

var arr =  [
    {
        "type": "text",
        "complete": true,
        "startPoint": {
            "x": 233.84,
            "y": 82.13
        },
        "endPoint": {
            "x": 461.27,
            "y": 79.74
        },
        "text": "xvxvs xsvx vx",
        "variants": [
            "xvxvs",
            "xsvx",
            "vx"
        ]
    },
    {
        "type": "text",
        "complete": true,
        "startPoint": {
            "x": 515.39,
            "y": 120.84
        },
        "endPoint": {
            "x": 803.67,
            "y": 111.31
        },
        "text": "casdc adcasdcasc",
        "variants": [
            "casdc",
            "adcasdcasc"
        ]
    }
];


var len = arr.length;

for(var i=0;i<len;i++){
  var obj = arr[i];
  console.log(obj["variants"]);
}

santi6291 · Accepted Answer · 2015-11-07 21:08:24Z

Make sure you assign it to a variable

var arr =    [
    {
        "type": "text",
        "complete": true,
        "startPoint": {
            "x": 233.84,
            "y": 82.13
        },
        "endPoint": {
            "x": 461.27,
            "y": 79.74
        },
        "text": "xvxvs xsvx vx",
        "variants": [
            "xvxvs",
            "xsvx",
            "vx"
        ]
    },
    {
        "type": "text",
        "complete": true,
        "startPoint": {
            "x": 515.39,
            "y": 120.84
        },
        "endPoint": {
            "x": 803.67,
            "y": 111.31
        },
        "text": "casdc adcasdcasc",
        "variants": [
            "casdc",
            "adcasdcasc"
        ]
    }
]
console.log(arr[0].variants)

Kenney · Accepted Answer · 2015-11-07 21:09:11Z

And one more :-)

var data =   
  [
    {
        "type": "text",
        "complete": true,
        "startPoint": {
            "x": 233.84,
            "y": 82.13
        },
        "endPoint": {
            "x": 461.27,
            "y": 79.74
        },
        "text": "xvxvs xsvx vx",
        "variants": [
            "xvxvs",
            "xsvx",
            "vx"
        ]
    },
    {
        "type": "text",
        "complete": true,
        "startPoint": {
            "x": 515.39,
            "y": 120.84
        },
        "endPoint": {
            "x": 803.67,
            "y": 111.31
        },
        "text": "casdc adcasdcasc",
        "variants": [
            "casdc",
            "adcasdcasc"
        ]
    }
]
;

for ( var i in data ) {
  $('pre').append( data[i].variants + "\n");
}
And one more ;-)

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

Collectives™ on Stack Overflow

How to access property of array of objects

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related