时间戳

首页 > 解决方案 > 在对象数组中循环，但不打印？

javascript - 在对象数组中循环，但不打印？

问题描述

我是编码新手，并尝试制作简单的脚本将此 json 打印到 html 表中。

它出什么问题了 ？

下一步将是创建输入字段以添加新数据。

document.getElementById("demo").innerHTML = text;

let bigHero = {characters:[
            {name:'Hiro', voice:'Ryan Potter'},
            {name:'Baymax', voice:'Scott Adsit'},
            {name:'Go Go Tamago', voice:'Jamie Chung'},
            {name:'Fred', voice:'T.J. Miller'}
        ]};

let chars = bigHero['characters'];  
  for(let i=0, len=chars.length; i<len; i++){
  text += "<tr>";
     for(let prop in chars[i]){
        text += "<td>" + chars[i][name] + "</td>";
        text += "<td>" + chars[i][voice] + "</td>";
}
  text += "</tr>";
  return text;
}

</script>

标签： javascripthtml

解决方案

您在每次迭代中不断覆盖变量的值。text

text = "</tr>";

如果这样做，则应确保在每次循环迭代结束时处理变量内容，然后再次覆盖它并撤消所有先前的工作。

下面是一个示例，假设您想bigHero在“demo”标签中显示变量的内容。
我们清除循环前的内容，并text在每次循环迭代结束时将变量的内容添加到 DOM 元素中。

或者，您也可以在整个循环之后用变量 content 替换 DOM 元素的内容。

let bigHero = {
    characters: [{
            name: 'Hiro',
            voice: 'Ryan Potter'
        },
        {
            name: 'Baymax',
            voice: 'Scott Adsit'
        },
        {
            name: 'Go Go Tamago',
            voice: 'Jamie Chung'
        },
        {
            name: 'Fred',
            voice: 'T.J. Miller'
        }
    ]
};

let chars = bigHero.characters,
    demo = document.getElementById("demo"),
    text = "";

// add content to DOM at the end of each iteration, before text variable is 'reset'
demo.innerHTML = "";
for (let i = 0, len = chars.length; i < len; i++) {
    text = "<tr>";
    text += "<td>" + chars[i].name + " </li>";
    text += "<td>" + chars[i].voice + " </li></tr>";
    demo.innerHTML += text;
}

// alternative: keep adding to text variable and add content to DOM element after whole loop completed
text = "";
for (let i = 0, len = chars.length; i < len; i++) {
    text += "<tr>";
    text += "<td>" + chars[i].name + " </li>";
    text += "<td>" + chars[i].voice + " </li></tr>";
}
demoTwo.innerHTML = text;
<table id="demo"></p>
</br>
<table id="demoTwo"></p>

推荐阅读