时间戳

首页 > 解决方案 > 遍历对象及其属性的数组列表

javascript - 遍历对象及其属性的数组列表

问题描述

循环遍历一个对象及其所有属性的最佳方法是什么，然后移动到另一个对象等等......

目前，我的代码只循环通过 lvlTitle。而我想循环遍历 lvlTitle，然后转到 statement1、statement2 和 statement3，然后转到下一个对象。

谢谢你。

这是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);

这是HTML：

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

这里还有一个 jsFiddle：Iterate through Array List of Objects

标签： javascript

解决方案

您可以创建一个递归函数。它将一个对象并创建一个列表（或您想要使用的任何 html 结构）。在该函数中查看每个属性，如果它没有处理它，它是一个对象将该对象传递回函数。这将适用于嵌套在任意深度的对象，并且是一个很好的技术：

// 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>

推荐阅读