数组的值未显示在特定 div 内答案

【问题标题】：Values of an array not getting displayed inside a particular div数组的值未显示在特定 div 内
【发布时间】：2020-06-24 12:24:08
【问题描述】：

我收到一个像这样循环的值数组

这个数组会根据之前的条件不断变化。该数组中的值应该以特定格式显示在 div 中，为此我编写了以下代码，

但是数据没有显示在 div 中。我希望每当数组发生变化时，其中的值应该在 div 中重新呈现谁能告诉我怎么做

var children = [{
    id: 1,
    name: "name-1",
    age: "6",
    price: "100"
  },
  {
    id: 2,
    name: "name-2",
    age: "9",
    price: "100"
  },
  {
    id: 3,
    name: "name-3",
    age: "9",
    price: "100"
  }
]



var z = children.forEach((element) => {
  return res = '<div class="row" style="color: #888888; font-size:16px;">' +
    ' <div class="col-md-8" style="padding-left: 0px;">' +
    '<div>' + element.name + '(age ' + element.age + ')' + '</div>' +
    '</div>' +
    '<div class="col-md-4" style="text-align: right;">' +
    '<div>' + element.price + '</div>' +
    '</div>' +
    '</div>'
});

document.getElementById('result').innerHTML = z;

&lt;div id="result"&gt;&lt;/div&gt;

【问题讨论】：

你为什么用jquery标记？
从 javascript 中拆分 html。
长期提示：如果您想将数据绑定到您的显示器（即，如果数据发生变化，它会更新），这将是从编写命令式代码转向响应式代码的好时机React、Vue等框架
你能把 z 改成一个函数吗？ function z() {...} 和 document...=z();
@iAmOren 这不是这样的。他们需要一张地图和z.join("")

标签： javascript arrays object foreach

【解决方案1】：

.forEach 是一个 void 函数，因此不返回任何内容，因此返回分配没有意义

试试这个：

<div id="result"></div>

var z = "";
children.forEach((element) => {
    z += '<div class="row" style="color: #888888; font-size:16px;">' +
            ' <div class="col-md-8" style="padding-left: 0px;">' +
                '<div>' + element.name +'(age ' + element.age + ')' + '</div>' +
            '</div>' +
            '<div class="col-md-4" style="text-align: right;">' +
                '<div>' + element.price + '</div>' +
            '</div>' +
        '</div>'
});

document.getElementById('result').innerHTML = z;

【讨论】：

最好解释你的答案，而不是仅仅提供代码。这样，OP 就有更多机会理解您的解决方案。此外，这并没有解决 OP 对显示在源数据更改时更新的关注。
@Mitya 你说得对。编辑了答案。对不起！

【解决方案2】：

forEach 没有返回类型，所以在 forEach 中返回是没有意义的，而是使用类似 map 的东西，如下所示

var z = children.map((element) => {
        return res = '<div class="row" style="color: #888888; font-size:16px;">' +
                ' <div class="col-md-8" style="padding-left: 0px;">' +
                    '<div>' + element.name +'(age ' + element.age + ')' + '</div>' +
                '</div>' +
                '<div class="col-md-4" style="text-align: right;">' +
                    '<div>' + element.price + '</div>' +
                '</div>' +
            '</div>'
    });

这里的z是一个元素数组，如果你愿意，你可以进一步使用reduce将所有元素组合成一个符合以下要求的字符串

z = z.reduce(acc=>acc+=acc);

var arr = ["a", "b", "c", "d", "e"];
var z = arr.map(val => (`<p>${val}</p>`))

document.getElementById('someId').innerHTML = z.reduce((acc, val) => acc += val, '');

&lt;div id="someId"&gt;&lt;/div&gt;

【讨论】：

document.getElementById('result').innerHTML =z.join("") 会更简单
那里不需要res=
@mplungjan 接受...随意编辑并添加您自己的版本
为什么要减少数组 - 只需使用 z.join("") ！

【解决方案3】：

forEach 是一个数组函数，不返回任何内容，你可以这样尝试：

var children = [
  {id: 1, name: "name-1", age: "6", price: "100"},
  {id: 2, name: "name-2", age: "9", price: "100"},
  {id: 3, name: "name-3", age: "9", price: "100"}
]
    
var z = '';

children.forEach((element) => {
  z += '<div class="row" style="color: #888888; font-size:16px;">' +
          ' <div class="col-md-8" style="padding-left: 0px;">' +
              '<div>' + element.name +'(age ' + element.age + ')' + '</div>' +
          '</div>' +
          '<div class="col-md-4" style="text-align: right;">' +
              '<div>' + element.price + '</div>' +
          '</div>' +
      '</div>'
});

document.getElementById('result').innerHTML = z;

【讨论】：

【解决方案4】：

这是一个可能的代码：

function z() {
  var res="";
  for(var element of children) {
    res += '<div class="row" style="color: #888888; font-size:16px;">' +
           '  <div class="col-md-8" style="padding-left: 0px;">' +
           '    <div>' + element.name +'(age ' + element.age + ')' + '</div>' +
           '  </div>' +
           '  <div class="col-md-4" style="text-align: right;">' +
           '    <div>' + element.price + '</div>' +
           '  </div>' +
           '</div>'
  }
  return res;
}

调用者：

document.getElementById('result').innerHTML = z();

【讨论】：

【解决方案5】：

由于似乎所有回答的人都略有错误，这就是你需要的

使用地图
返回呈现的 html
插入合并的结果

const children = [
  {id: 1, name: "name-1", age: "6", price: "100"},
  {id: 2, name: "name-2", age: "9", price: "100"},
  {id: 3, name: "name-3", age: "9", price: "100"}
];

document.getElementById('result').innerHTML = children.map(
  element => `<div class="row" style="color: #888888; font-size:16px;">
  <div class="col-md-8" style="padding-left: 0px;">
    <div>${element.name} (age ${element.age})</div>
  </div>
  <div class="col-md-4" style="text-align: right;">
    <div>${element.price}</div>
  </div>
</div>`).join("");

&lt;div id="result"&gt;&lt;/div&gt;

【讨论】：