CODEWITHSUNDEEP
jqueryarrayskey
Mithun Uchil
Mithun Uchil

Reputation: 347

Getting and using values from selected Object.keys

I have an array as below.

var Brand = { "Brand1-Parameter1-SubBrand1": [{ "Image": "animal", "Heading": "SubBrand1", "Link": "SubBrand1" }], 
                "Brand1-Parameter1-SubBrand2": [{ "Image": "animal", "Heading": "SubBrand2", "Link": "SubBrand2" }], 
                "Brand1-Parameter2-SubBrand3": [{ "Image": "water", "Heading": "SubBrand3", "Link": "SubBrand3" }], 
                "Brand1-Parameter2-SubBrand4": [{ "Image": "water", "Heading": "SubBrand4", "Link": "SubBrand4" }], 
                "Brand2-Parameter1-SubBrand5": [{ "Image": "travel", "Heading": "SubBrand5", "Link": "SubBrand5" }], 
                "Brand2-Parameter1-SubBrand6": [{ "Image": "travel", "Heading": "SubBrand6", "Link": "SubBrand6" }], 
                "Brand2-Parameter2-SubBrand7": [{ "Image": "flower", "Heading": "SubBrand7", "Link": "SubBrand7" }], 
                "Brand2-Parameter2-SubBrand8": [{ "Image": "flower", "Heading": "SubBrand8", "Link": "SubBrand8" }], 
            }

A small filter function gives me the two Object.keys from the above array:

var ParentBrandParameterKeys = Object.keys(Brand).filter(v => v.split("-").includes(ParentBrandSelected) && v.split("-").includes(ParameterSelected))

console.log(ParentBrandParameterKeys) gives me the below:

["Brand1-Parameter1-SubBrand1", "Brand1-Parameter1-SubBrand2"]

What I need is to use the values of the above selected keys to build a small div structure as below:

jQuery.each(ParentBrandParameterKeys, function(index, value){
        markup += '<a href="/Directory/SubDirectory/'+ Brand[value].Link +'.html">'
        markup += '<div class="InnerBlock">'
        markup += '<div style="background-image:url(https://source.unsplash.com/1280x720/?' + Brand[value].Image +')">'+ Brand[value].Heading +'</div>'
        markup += '</div>'
        markup += '</a>'
     });

But this isn't working. How do I get the values for the selected Object.keys?

Upvotes: 0

Views: 15

Answers (1)

Alberto
Alberto

Reputation: 12939

As you can see from your structure, associated to "Brand1-Parameter1-SubBrand1" (e.g.) there is an array with an object inside, therefore your function should look like this:

jQuery.each(ParentBrandParameterKeys, function(index, value){
    markup += '<a href="/Directory/SubDirectory/'+ Brand[value][0].Link +'.html">'
    markup += '<div class="InnerBlock">'
    markup += '<div style="background-image:url(https://source.unsplash.com/1280x720/?' + Brand[value][0].Image +')">'+ Brand[value][0].Heading +'</div>'
    markup += '</div>'
    markup += '</a>'
 });

Upvotes: 1

Related Questions