遍历对象数组并以HTML显示

问题描述

我有一个如下数组：

var locations = [{
        plot: "24-17",address: "XYZ",city: "Something",pin: "24399",phone: "041678993"
    },{
        plot: "24-18",address: "ABC",pin: "24398",phone: "041678995"
    },{
        plot: "24-19",address: "DEF",pin: "24397",phone: "041678994"
    }];

现在，我想遍历数组并将它们显示在以下dom中：

<div id="locations-grid">
  <div id="di-locations">
     <div id="plot"></div>
     <div id="address"></div>
     <div id="city"></div>
     <div id="pin"></div>
     <div id="phone"></div>
  </div>
</div>

数组中的每个对象都对应一个位置。我想将所有位置显示为css网格中的不同列。

我尝试过

locations.map((item)=>{ 
    plot.innerHTML = item.plot;
    address.innerHTML = item.address; 
    city.innerHTML = item.city; 
    pin.innerHTML = item.pin; 
    phone.innerHTML = item.phone; 
});

但是，这仅显示数组中的最后一个对象。但这并不能将3个对象放入网格的3个不同列中。

解决方法

将结构放入DIVS是不正确的方法，请使用 TABLE 代替它（此处带有标题行）。您必须动态构建它的行和单元，因为您不知道将需要多少行，而且它的结构也要复杂得多。
首先使用 document.getElementById 从表中获取处理程序，然后为每行创建一个新的表行 TR ，然后遍历数据。为它的每个属性创建一个新的单元格 TD 并将其值添加到 innerHTML 。用 appendChild 将TD附加到TR行中，因为到目前为止，元素都不在DOM中。对每个属性完成此操作后，将TR附加到表中。现在表将显示在表中。

var locations = [{
        plot: "24-17",address: "XYZ",city: "Something",pin: "24399",phone: "041678993"
    },{
        plot: "24-18",address: "ABC",pin: "24398",phone: "041678995"
    },{
        plot: "24-19",address: "DEF",pin: "24397",phone: "041678994"
          }
];

let table = document.getElementById('di-locations');
locations.forEach(location => {
    let tr = document.createElement('tr');
    Object.entries(location).forEach(value => { 
       let td = document.createElement('td');
       td.innerHTML= value;
       tr.appendChild(td);
    });
    table.appendChild(tr);
});

td,th { border: 1px solid black; }

<div id="locations-grid">
  <table id="di-locations">
    <tr>
      <th>plot</th>
      <th>address</th>
      <th>city</th>
      <th>pin</th>
      <th>phone</th>
    </tr>
  </table>
</div>

,

您可以iterate覆盖这些位置对象，并附加包含位置属性数据grid的新as you go项。根据您的问题，我们不清楚结果的确切模样，但是此代码段为您提供了一些基础...

var locations = [{
  plot: "24-17",phone: "041678993"
},{
  plot: "24-18",phone: "041678995"
},{
  plot: "24-19",phone: "041678994"
}];

var container = document.getElementById("di-locations");

// iterate locations
for (loc of locations) {
  // iterate location properties
  for (var prop in loc) {
    if (Object.prototype.hasOwnProperty.call(loc,prop)) {
      //create and append grid item
      var item = document.createElement("DIV");
      item.classList.add(loc[prop]);
      item.innerHTML = loc[prop];
      container.appendChild(item);
    }
  }
}

#di-locations {
  display: grid;
  grid-template-columns: auto auto auto auto auto;
  font-family: sans-serif;
}

#di-locations>* {
  padding: .8rem;
  border-bottom: 1px solid #ddd;
}

<div id="locations-grid">
  <div id="di-locations"></div>
</div>

,

这应该有所帮助，不要太难将其变成网格：

HTML：

<div id="i"></div>

JavaScript：

var locations = [{
        plot: "24-17",phone: "041678994"
    }];

txt = "<p>"; // Define txt so it can be accessed inside of functions
locations.forEach(foo); // Run foo for each item in the array

function foo(value,index,array) {
  txt = txt + "Plot: " + value["plot"] + "<br>"; // Add Plot: _____ to the end of txt
  txt = txt + "Address: " + value["address"] + "<br>"; // Similar to above
  txt = txt + "City: " + value["city"] + "<br><br>"; // Similar to above
}
document.getElementById("i").innerHTML = txt + "</p>"; // Set the inner html of i to txt