How to display each key's values in a JavaScript object?

Question

The basic idea is pretty simple. Let's begin with the JavaScript object:

apps = {
    app1:
    [
        "ci-extension",
        "Unnamed",
        "<h1>Hello world!</h1>"
    ],
    app2:
    [
        "ci-extension",
        "Another one!",
        "Cool!"
    ],
}

I have the following variables set up already to help me with my case:

_Meta ["app1", "app2"]
_Ammount 2

Now, what I need to do is create a <div> with its ID attribute set to key's name (e.g. "app1", or _Meta[0]) then in this <div> add a new div element with its class attribute set to "window-header" and in this div write in the following: <i class="ci-pro {line 1 of they key's value}"></i> {line 2 of the key's value}. And finally, a new div with line 3 of the key's value as content. Example:

<div id="app1">
    <div class="window-header"><i class="ci-pro ci-extension"></i> Unnamed</div>
    <div>
        <h1>Hello world!</h1>
    </div>
</div>

and the same goes for all other keys.

What I tried?

JavaScript:

for (var i = 0; i < _Ammount; i++) {
    var tmp = meta[i];
    console.log(apps.tmp); //returns: undefined, undefined
}
//and also...
for (var i = 0; i < _Ammount; i++) {
    var tmp = meta[i];
    console.log(apps + "." + tmp); //returns: [object Object].app1, [object Object].app2
}

And everything else is using jQuery append to create the elements and fill in the needed infrmation.

So, how do you make the `for` return an object with each key's values?

My mind is obfuscated at its maximum levels, so any help would be highly appreciated. Thanks in advance!

Check out Object.keys()... developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… — ryan0319
– ryan0319, Commented Sep 20, 2017 at 16:42
apps[ tmp ] not apps+"."+tmp or apps.tmp. The latter is accessing the property literally named tmp, and the other is just making a string, not using the value of tmp as a accessor to apps. Look at property accessors — Patrick Evans
– Patrick Evans, Commented Sep 20, 2017 at 16:43

marvel308 · Accepted Answer · 2017-09-20 16:41:51Z

1

you can use a for...in loop

apps = {
    app1:
    [
        "ci-extension",
        "Unnamed",
        "<h1>Hello world!</h1>"
    ],
    app2:
    [
        "ci-extension",
        "Another one!",
        "Cool!"
    ]
}

for(let key in apps){
    console.log(key, apps[key]);
}

answered Sep 20, 2017 at 16:41

marvel308

10.5k3 gold badges24 silver badges32 bronze badges

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

Comments

Marcelo Vismari · Accepted Answer · 2017-09-20 16:44:41Z

0

apps = {
    app1:
    [
        "ci-extension",
        "Unnamed",
        "<h1>Hello world!</h1>"
    ],
    app2:
    [
        "ci-extension",
        "Another one!",
        "Cool!"
    ],
};

for(var key1 in apps) {
    for(var key2 in apps[key1]) {
        console.log('key2', key2, 'value:', apps[key1][key2]);  
    }
};

answered Sep 20, 2017 at 16:44

Marcelo Vismari

1,1798 silver badges16 bronze badges

Comments

treeseal7 · Accepted Answer · 2017-09-20 16:52:20Z

0

obj={a:0, b:1, c:2}

for (var key in obj) {
    console.log(obj[key])
}

this iterates through keys in the object. the key can be called anything and then you access it by obj[key]

edited Sep 20, 2017 at 16:52

answered Sep 20, 2017 at 16:46

treeseal7

74910 silver badges25 bronze badges

Comments

D Lowther · Accepted Answer · 2017-09-20 17:28:17Z

I would probably iterate over the object keys using a foreach loop. As a pointer I would suggest using an object for your app description fields rather than piling them into arrays, having the key to reference there would make maintainability a bit easier down the road.

apps = {
    app1:
    [
        "ci-extension",
        "Unnamed",
        "<h1>Hello world!</h1>"
    ],
    app2:
    [
        "ci-extension",
        "Another one!",
        "Cool!"
    ],
};

let container = document.querySelector(/*containing element*/);
Object.keys(apps).forEach(key => {
    let div = document.createElement('div');
    div.id = key;

    let header = document.createElement('div');
    header.className = 'window-header';
    header.innerHTML = `<i class="ci-pro ${apps[key][0]}"></i>${apps[key][1]}`;

    let hello = document.createElement('div');
    hello.innerHTML = `<h1>${apps[key][3]}</h1>`;

    div.appendChild(header);
    div.appendCheild(hello);
    container.appendChild(div);
});

Collectives™ on Stack Overflow

How to display each key's values in a JavaScript object?

What I tried?

So, how do you make the `for` return an object with each key's values?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

What I tried?

So, how do you make the for return an object with each key's values?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related

So, how do you make the `for` return an object with each key's values?