Javascript - Find multiple values in multidimensional array

Question

Got some JSON that I need to go through to fetch some IDs. The JSON looks like this:

var carousel = [
  {
    "acf": {
      "content": [
        {
          "acf_fc_layout": "custom",
          "content": "Some text"
        },
        {
          "acf_fc_layout": "exhibition",
          "exhibition": 2594
        },
        {
          "acf_fc_layout": "exhibition",
          "exhibition": 1234
        }
      ]
    },
  }
]

For every content where acf_fc_layout == exhibition I must fetch the value (ID) of exhibition so it can be used to fetch further data. As you can see there's multiple exhibition IDs aswell.

My confusion here is that there are both object and array, and that they're nested. I've done some similar stuff with jQuery, but that's out of the question this time. Don't think I need IE8 support, but still find this tricky..

DeadEli · Accepted Answer · 2015-07-16 13:57:16Z

1

If your JSON simply looks as you say, this is a simple solution:

var i;
for (i = 0; i < carousel[0].acf.content.length; i++) {
    if (carousel[0].acf.content[i].acf_fc_layout === "exhibition") {
        // do something with carousel[0].acf.content[i].exhibition
    }
}

Alternatively if you have much more content in your JSON, this might be relevant:

var i, j;
for (i = 0; i < carousel.length; i++) {
    if (typeof carousel[i].acf != 'undefined' && typeof carousel[i].acf.content != 'undefined') {
        for (j = 0; j < carousel[i].acf.content.length; j++) {
            if (carousel[i].acf.content[j].acf_fc_layout === "exhibition") {
                // do something with carousel[i].acf.content[j].exhibition
            }
        }
    }
}

answered Jul 16, 2015 at 13:57

DeadEli

1,0552 gold badges15 silver badges29 bronze badges

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

3 Comments

INT Over a year ago

Could you elaborate on the second solution? Why is that better if I have more content?

DeadEli Over a year ago

That will run through all of the data in your JSON, so if you have multiple elements in carousel (the top level list) matching the format of the one element (carousel[i].acf.content[j].acf_fc_layout), the second solution will allow for you to access those other elements' exhibition id.

DeadEli Over a year ago

Browser compatibility? I only use basic JavaScript constructs, so as far as I'm aware, it should run on anything that supports JavaScript. I'm no JavaScript expert, but I would be shocked if you could find a browser that supports JavaScript, but not that code.

Kesha Seyfert · Accepted Answer · 2015-07-16 13:43:57Z

1

carousel[0].acf.content.forEach(function (item) {
  if (item["acf_fc_layout"] === "exhibition") {
    // do some stuff
    // id for exhibition placed in item["exhibition"] 
  }
});

answered Jul 16, 2015 at 13:43

Kesha Seyfert

384 bronze badges

3 Comments

INT Over a year ago

Ah, simple enough. Works in IE9> I suppose?

dakab Over a year ago

Both MDN and caniuse say yes, forEach works starting in IE9.

Kesha Seyfert Over a year ago

for (var i = 0; i < carousel[0].acf.content.length; i++) { var item = carousel[0].acf.content[i]; if (item["acf_fc_layout"] === "exhibition") { // do some stuff } } This should work in IE8

Jean-philippe Emond · Accepted Answer · 2015-07-16 13:45:47Z

0

With your current structure, you need to use a foreach and check the value.

 var carousel = [
  {
    "acf": {
      "content": [
        {
          "acf_fc_layout": "custom",
          "content": "Some text"
        },
        {
          "acf_fc_layout": "exhibition",
          "exhibition": 2594
        },
        {
          "acf_fc_layout": "exhibition",
          "exhibition": 1234
        }
      ]
    },
  }
];

$.each(carousel[0].acf.content,function (i,v){
    if(v.acf_fc_layout == "exhibition")
        $(".result").append(v.exhibition+"<br>");
    });

JSFIddle

answered Jul 16, 2015 at 13:45

Jean-philippe Emond

1,6142 gold badges17 silver badges30 bronze badges

Comments

Jędrzej Chałubek · Accepted Answer · 2015-07-16 13:52:40Z

0

http://jsfiddle.net/oucp3v5x/

$(carousel).each(function(i, el){

    $(el.acf.content).each(function(i, el){
        if(el.acf_fc_layout === 'exhibition') {
            $('<div>', {
                text: el.exhibition
            }).appendTo($('#results'));
        }
    });

});

If acf have many content, you need to run additional loop and acf have to be array of objects.

edited Jul 16, 2015 at 13:52

answered Jul 16, 2015 at 13:44

Jędrzej Chałubek

1,4481 gold badge16 silver badges29 bronze badges

2 Comments

DeadEli Over a year ago

acf is an associative array. Associative arrays can't have multiple keys of the same name, so it can't have "many content".

Jędrzej Chałubek Over a year ago

"and acf have to be array of objects." the key word of my comment. It's a tip.

Collectives™ on Stack Overflow

Javascript - Find multiple values in multidimensional array

4 Answers 4

3 Comments

3 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

3 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related