Question

我是编码的新手，正在尝试制作简单的脚本将此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>

Answer 1

在每次迭代中，您都覆盖变量text的值。

text = "</tr>";

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

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

或者，您还可以在整个循环之后用可变内容替换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>

Answer 2

使用map()方法和string interpolation的组合，只需用2-3行代码即可获得相同的期望结果，就像这样：

var x = document.getElementById("demo");
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;

// Using map() method
chars.map(char => {
	x.innerHTML += `<tr><td>${char.name}</td><td>${char.voice}</td></tr>`
});

<table id="demo"></table>

但是，如果您喜欢 for循环方法：

只需为结果res声明一个空的字符串变量，并且每当for loop完成一个循环时，它就会将其内容压入res变量并将其自身重置为空变量。

然后，一旦for循环完成，只需使用res将#demo变量字符串推入您的innerHTML()表，如下所示：

var x = document.getElementById("demo");
var res = "";

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; i<chars.length; i++){
  	text = "<tr>";
    text += "<td>" + chars[i].name + "</td>";
    text += "<td>" + chars[i].voice + "</td>";
  	text += "</tr>";
    
    res += text;
	}
  x.innerHTML = res;

<table id="demo"></table>

Answer 3

    text += "<td>" + chars[i][name] + "</li>";
    text += "<td>" + chars[i][voice] + "</li>";

const name = "Hiro" chars[name]等于：chars["Hiro"]，不等于：chars["name"]

使用obj.key代替使用obj [“ key”]进行访问

关闭：：缓存数组的长度会使代码更难阅读，但不能带来可衡量的性能提升

在对象数组中进行循环，但不打印？

3 个答案: