Get values of Object with Arrays in JavaScript

Question

I have an Object of Arrays with a key to identify each Array. I would like to make a render function, which can append the key's names to an unordered list in my HTML document, and append a new unordered list for each key, with a list of each value for that key.

Example

<ul>
  <li>Key1</li>
    <ul>
      <li>Value1</li>
      <li>Value2</li>
    </ul>
  <li>Key2</li>
    <ul>
      <li>Value1</li>
      <li>Value2</li>
    </ul>
</ul>

My code:

HTML

<div class="expandable">
  <ul class="list">

  </ul>
</div>

JavaScript

let list = document.querySelector('.list')

let playslists = {
    'Pop' : [
        'Recurrent Pop Music',
        '1990s Pop - Greates',
        '2000s Pop - Greatest',
        '2010s Pop - Greatest'
    ],
    'Rock' : [
        'Recurrent Rock Music',
        '1990s Rock - Greatest',
        '2000s Rock - Greatest',
        '2010s Rock - Greatest'
    ]
}

function render(values) {    
    for(object in playslists) {
        // Fill list in HTML document.
    }
}

render()

Question

Can i get the keys and values of each object in the for-loop of my render function, to show a list on the webpage, with the keys as category and the values as the playlist names?

Pop
- Recurrent Pop Music
- 1990s Pop - Greatest
- 2000s Pop - Greatest
- 2010s Pop - Greatest
Rock
- Recurrent Rock Music
- 1990s Rock - Greatest
- 2000s Rock - Greatest
- 2010s Rock - Greatest

kind user · Accepted Answer · 2017-04-29 16:19:22Z

1

Possible solution.

let list = document.querySelector('.list'),
  p = {
    'Pop': [
      'Recurrent Pop Music',
      '1990s Pop - Greates',
      '2000s Pop - Greatest',
      '2010s Pop - Greatest'
    ],
    'Rock': [
      'Recurrent Rock Music',
      '1990s Rock - Greatest',
      '2000s Rock - Greatest',
      '2010s Rock - Greatest'
    ]
  };

function f(data) {
  Object.keys(p).forEach(function(v) {
    var li = document.createElement('li'),
        ul = document.createElement('ul');
    p[v].forEach(function(c) {
      var li2 = document.createElement('li');
      li2.textContent = c;
      ul.appendChild(li2);
    })
    li.textContent = v;
    li.appendChild(ul);
    list.appendChild(li);
  })
}

f(p);

<div class="expandable">
  <ul class="list">

  </ul>
</div>

answered Apr 29, 2017 at 16:19

kind user

42k8 gold badges69 silver badges78 bronze badges

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

2 Comments

Kim Brun Jørgensen Over a year ago

@gyre - I've picked this solution as the correct one instead of yours, because it maches what I am looking for more than yours. But thanks for the help anyways. :)

gyre Over a year ago

Thanks @KimJørgensen, I appreciate the follow-up. I would do it this way too if my HTML got to be more complex than bare tags.

gyre · Accepted Answer · 2017-04-29 16:42:49Z

You can simplify the rendering of HTML using Array methods like map and join:

let list = document.querySelector('.list')

let playlists = {
  'Pop': [
    'Recurrent Pop Music',
    '1990s Pop - Greatest',
    '2000s Pop - Greatest',
    '2010s Pop - Greatest'
  ],
  'Rock': [
    'Recurrent Rock Music',
    '1990s Rock - Greatest',
    '2000s Rock - Greatest',
    '2010s Rock - Greatest'
  ]
}


function render() {
  list.innerHTML = '<li>' + Object.keys(playlists).map(function(k) {
    return k + '<ul><li>' + playlists[k].join('</li><li>') + '</li></ul>'
  }).join('</li><li>') + '</li>'
}

render()

<div class="expandable">
  <ul class="list">

  </ul>
</div>

Edit: Here's how you would do it if you wanted to add classes and other attributes to the markup:

let list = document.querySelector('.list')

let playlists = {
  'Pop': [
    'Recurrent Pop Music',
    '1990s Pop - Greatest',
    '2000s Pop - Greatest',
    '2010s Pop - Greatest'
  ],
  'Rock': [
    'Recurrent Rock Music',
    '1990s Rock - Greatest',
    '2000s Rock - Greatest',
    '2010s Rock - Greatest'
  ]
}

let OUTER_LI = '<li class="outer-list-item">'
let UL = '<ul class="inner-list">'
let INNER_LI = '<li class="inner-list-item">'

function render() {
  list.innerHTML = OUTER_LI + Object.keys(playlists).map(function(k) {
    return k + (UL + INNER_LI) + playlists[k].join('</li>' + INNER_LI) + '</li></ul>'
  }).join('</li>' + OUTER_LI) + '</li>'
}

render()

.outer-list-item {
  color: red;
}

.inner-list {
  border: .1em solid green;
}

.inner-list-item {
  color: blue;
}

<div class="expandable">
  <ul class="list">

  </ul>
</div>

Though this is the correct answer, and I will accept is as such, would it be possible to write it in a way, so I am able to manipulate each <ul> and <li>? To add classNames and such?
Of course! If you give me an example class attribute I can show you how it would be done via an edit.
It looks like you know how to use querySelector, so just select the elements after the HTML has been constructed (but still within render) and then call addEventListener on each element at that point.

Mathias W · Accepted Answer · 2017-04-29 16:23:22Z

0

Just render the object name and then iterate its array, for example:

function render(values) {    
    for(object in playslists) {
        // Fill list in HTML document.
        let genre = document.createElement('div');
        genre.innerHTML = object;
        list.appendChild(genre)
        for(record in playslists[object]){
          let entry = document.createElement('li');
          entry.innerHTML = playslists[object][record];
          list.appendChild(entry)
        }
    }
}

https://jsfiddle.net/me23dk3d/

edited Apr 29, 2017 at 16:23

answered Apr 29, 2017 at 16:03

Mathias W

1,56113 silver badges16 bronze badges

1 Comment

DarkAtra Over a year ago

the values argument is not used in your function. you are reassigning values in the second for in loop: for(values in playslists[object])

Collectives™ on Stack Overflow

Get values of Object with Arrays in JavaScript

3 Answers 3

2 Comments

7 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

7 Comments

1 Comment

Related