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, Commented Nov 7, 2015 at 21:06

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

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);
}

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). — U r s u s, Commented Nov 7, 2015 at 21:24
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]; — Darin Dimitrov, Commented Nov 7, 2015 at 21:33

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 badges20 silver badges41 bronze badges

Add a comment |

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

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>");
});

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

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Related