Iterate through Array List of Objects and its properties

Question

What is the best method for looping through one object and all of its properties, then moving onto another object and so on...

At the moment, my code only loops through lvlTitle. Whereas I would like to loop through lvlTitle then move on to statement1, statement2, and statement3 and then to the next object.

Thank you.

Here is the javascript:

// Different Levels
var lvls = {
  start: {
    lvlTitle: 'Lets Start!',
  },
  lvl1: {
    lvlTitle: 'Drinks/Soda/water',
    statement1: 'lvl1 info...',
    statement2: 'lvl1 more info...',
    statement3: 'lvl1 more more info...'
  },
  lvl2: {
    lvlTitle: 'Portion Control/Meals',
    statement1: 'lvl2 info...',
    statement2: 'lvl2 more info...',
    statement3: 'lvl2 more more info...'
  },
  lvl3: {
    lvlTitle: 'Salt',
    statement1: 'lvl3 info...',
    statement2: 'lvl3 more info...',
    statement3: 'lvl3 more more info...'
  }
}

// Array of all the levels
var allLvls = [];

// Populate users array
for (var key in lvls) {
  allLvls.push(lvls[key]);
}

console.log(allLvls[0].lvlTitle);


let myIndex = 1;
let printText = document.querySelector('.text-container');

printText.innerHTML = allLvls[0].lvlTitle;


function nextLevel() {
  printText.innerHTML = allLvls[myIndex].lvlTitle;
  myIndex = (myIndex + 1) % (allLvls.length);
};


printText.addEventListener('click', nextLevel);

And here is the Html:

<div class="full-page">
<div class="click-container">
  <ul class="text-container">
    <li class="text-content">
      <div></div>
    </li>
  </ul>
</div>

Also here is a jsFiddle: Iterate through Array List of Objects

What's your expected output? When clicking next, will first show Drinks/Soda/water then lvl1 info... and so on? — Isaac
– Isaac, Commented Jul 27, 2018 at 1:32

Mark · Accepted Answer · 2018-07-27 01:46:38Z

You can create a recursive function. It will an object and make a list (or whatever html structure you want to use). In that function look at every property, it's it an object pass that object back into the function, if it's not process it. This will work for objects nested at arbitrary depths and is a good technique to know:

// Different Levels
var lvls = {start: {lvlTitle: 'Lets Start!',},lvl1: {lvlTitle: 'Drinks/Soda/water',statement1: 'lvl1 info...',statement2: 'lvl1 more info...',statement3: 'lvl1 more more info...'},lvl2: {lvlTitle: 'Portion Control/Meals',statement1: 'lvl2 info...',statement2: 'lvl2 more info...',statement3: 'lvl2 more more info...'},lvl3: {lvlTitle: 'Salt',statement1: 'lvl3 info...',statement2: 'lvl3 more info...',statement3: 'lvl3 more more info...'}}

function printProps(obj){
    let html = "<ul>"
    Object.keys(obj).forEach(key => {
        html += '<li>' + key + '</li>'
        let next = (typeof obj[key] == 'object' ? printProps(obj[key]) : obj[key])
        html += '<li>' + next + '</li>'
    })
    html += "</ul>"
    return html
}

let d = document.getElementById('list')
d.innerHTML = printProps(lvls)

<div id = "list"></div>

Patrick Roberts · Accepted Answer · 2018-07-27 03:18:38Z

1

Building on Mark Meyer's answer and Dacre Denny's answer, I offer a recursive generator function that iterates an object's nested values. I also recommend encapsulating the infinite repetition in a higher-order iterator for cleaner code:

const lvls = {start:{lvlTitle:'Lets Start!'},lvl1:{lvlTitle:'Drinks/Soda/water',statement1:'lvl1 info...',statement2:'lvl1 more info...',statement3:'lvl1 more more info...'},lvl2:{lvlTitle:'Portion Control/Meals',statement1:'lvl2 info...',statement2:'lvl2 more info...',statement3:'lvl2 more more info...'},lvl3:{lvlTitle:'Salt',statement1:'lvl3 info...',statement2:'lvl3 more info...',statement3:'lvl3 more more info...'}}

function * deepValuesIterator (o) {
  if (typeof o === 'object') {
    for (const value of Object.values(o)) {
      yield * deepValuesIterator(value)
    }
  } else {
    yield o
  }
}

// let's make nextLevel() our infinite iterator
function * nextLevel (levels, generator, element) {
  while (true) {
    for (const value of generator(levels)) {
      yield element.textContent = value
    }
  }
}

const printText = document.querySelector('.text-container')
const lvlsIterator = nextLevel(lvls, deepValuesIterator, printText)

printText.addEventListener('click', () => lvlsIterator.next())

lvlsIterator.next()

.click-container {
  display: flex;
  width: 90vw;
  height: 12vh;
  justify-content: center;
  align-items: center;
  font-size: calc(14px + (48 - 14) * ((100vw - 300px) / (1600 - 300)));
  font-weight: 900;
  cursor: pointer;
  user-select: none;
}

<div class="full-page">
  <div class="click-container">
    <ul class="text-container">
      <li class="text-content">
        <div>
        </div>
      </li>
    </ul>
  </div>
</div>

edited Jul 27, 2018 at 3:18

answered Jul 27, 2018 at 3:07

Patrick Roberts

52.4k10 gold badges120 silver badges166 bronze badges

2 Comments

Joshua Garcia Over a year ago

Thank you very much for the help. I am definitely going to have to read up on recursive generator functions as I have not come across that term so far.

Patrick Roberts Over a year ago

@JoshuaGarcia I'd start by checking out the yield* operator.

Dacre Denny · Accepted Answer · 2018-07-27 01:56:20Z

You could use a generator for this special case iteration.

Generators are a relativity new language feature (ES6), that give you the ability to define custom iteration behaviour, allowing you to elegantly iterate through bespoke data structures, data sets, etc.

In ES6, the * symbol is used to denote that a function is a generator, and the yield keyword defines how/when your generator function will return a value (or values) back to the iteration sequence being generated.

In the case of your requirements, a generator can be defined and used as follows:

/* Define your iterator as follows. Notice the *, which denotes this 
   function as a generator 
*/
function *iterateData(lvlsData) {

    // Iterate the values of your input data, ie the objects with 
    // `lvlTitle` keys
    for (const node of Object.values(lvlsData)) {

        // Iterate the values of the that you want your application 
        // to iterate through sequentially
        for(var value of Object.values(node)) {

           // The yield keyword means "return this value" to the 
           // external iteration
           yield value
        }

    }
  }

var htmlList = '<ul>'

// Use the generator like so, to produce the following output based on 
// your data:
for(var str of iterateData(lvls)) {

    htmlList += '<li>' + str + '</li>'
}

htmlList += '</ul>'

let d = document.getElementById('list')
d.innerHTML = htmlList;

Collectives™ on Stack Overflow

Iterate through Array List of Objects and its properties

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related