Traversing JavaScript object - what am I missing?

Question

This is a pretty simple question, but I can't figure out what I'm doing wrong. Say I have this object:

features: {
    savings: {
        link: "test.html",
        img: "/_assets/img/related-content/sample.png"
    },
    security: {
        link: "test2.html",
        img: "/_assets/img/related-content/sample2.png"
    },
    speed: {
        link: "test3.html",
        img: "/_assets/img/related-content/sample3.png"
    }
}

Assume that this format is set and cannot be changed. I can easily select by doing something like features["savings"].link. But let's say I want to get a random item from this object. I would generate a random number, and then select the index using that. But features[randnum].link doesn't work. Why is this? How can I do this without modifying the object format?

Thanks!

possible duplicate of Pick random property from a Javascript object — Felix Kling
– Felix Kling, Commented Oct 20, 2011 at 15:21

Einacio · Accepted Answer · 2011-10-20 15:35:18Z

3

It's because you're dealing with an object, not an array, so you can't index into the object with just a number. You would have to do something like:

var randnum = getRandomNumber(1, 3); // get random num between 1 and 3
var randomLink = features["feature" + randnum].link;

Just for clarification, this notation:

features["feature1"].link;

is the same as

features.feature1.link;

If you don't have property names that you can easily generate, like "security" or "savings", you could use an array to help you out, assuming the properties are static.

var properties = [ "security", "savings" ];
var randomProperty = properties[Math.floor(Math.random() * properties.length)];
var randomLink = features[randomProperty].link;

If you don't know what you're properties are going to be, then you can collect them:

var properties = [];
for (var prop in features) {
    if (features.hasOwnProperty(prop)) {
        properties.push(prop);
    }
}
var randomProperty = properties[Math.floor(Math.random() * properties.length)];
var randomLink = features[randomProperty].link;

edited Oct 20, 2011 at 15:35

Einacio

3,5422 gold badges19 silver badges21 bronze badges

answered Oct 20, 2011 at 15:12

Cᴏʀʏ

108k20 gold badges169 silver badges201 bronze badges

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

3 Comments

Paul Erdos Over a year ago

Let's say I had just category names (like security, savings, etc.) instead of feature1, feature2, etc. How would I do it then?

Felix Kling Over a year ago

@ellenchristine: You could get all keys in an array and choose an element randomly.

Einacio Over a year ago

you could add a for(x in features) to populate the properties array

Einacio · Accepted Answer · 2011-10-20 15:14:42Z

0

js objects aren't numericaly indexed, you can't access it as an array using integers.

answered Oct 20, 2011 at 15:14

Einacio

3,5422 gold badges19 silver badges21 bronze badges

3 Comments

Paul Erdos Over a year ago

I see. So I can only treat it as an associative array?

Cᴏʀʏ Over a year ago

It's not an associate array though, it's an object. The syntax myArray['myPropertyName'] is just a different way to access a property of an object.

chris Over a year ago

You can't say they aren't numerically indexed. I think in one sense or another all arrays are, if they aren't associative. Anyway.. Take a look at W3 for example, they show an indexed array there. And I know I have worked with objects/arrays where I've done something like myobj[0].myproperty. W3 ref: w3schools.com/js/js_obj_array.asp

DefyGravity · Accepted Answer · 2011-10-20 15:17:12Z

features[something] against your original json structure will make it look for features.something. However, you can actually make features an Array of json objects. this will give you your random access you want. However, it will be come a 'search' function to find feature3 unless you put some thought into creating the array.

for features[randomInteger].link, change to the structure below:

var features = [{
        name:"feature1",
        link: "test.html",
        img: "/_assets/img/related-content/sample.png"
    },
    {
        name:"feature2",
        link: "test2.html",
        img: "/_assets/img/related-content/sample2.png"
    },
    {
        name:"feature3",
        link: "test3.html",
        img: "/_assets/img/related-content/sample3.png"
    }]

Collectives™ on Stack Overflow

Traversing JavaScript object - what am I missing?

3 Answers 3

3 Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related