循环遍历对象数组并以 HTML 显示

Question

我有一个数组如下：

var locations = [{
        plot: "24-17",
        address: "XYZ",
        city: "Something",
        pin: "24399",
        phone: "041678993"
    },    {
        plot: "24-18",
        address: "ABC",
        city: "Something",
        pin: "24398",
        phone: "041678995"
    },    {
        plot: "24-19",
        address: "DEF",
        city: "Something",
        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 个不同列中。

Answer 1

将结构放入 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",
        city: "Something",
        pin: "24398",
        phone: "041678995"
    },    {
        plot: "24-19",
        address: "DEF",
        city: "Something",
        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>

Answer 2

您可以iterate 覆盖这些位置对象，并附加包含位置属性数据as you go 的新grid 项目。从你的问题来看，结果应该是什么样子有点不清楚，但是这个 sn-p 为你提供了一些可以构建的东西......

var locations = [{
  plot: "24-17",
  address: "XYZ",
  city: "Something",
  pin: "24399",
  phone: "041678993"
}, {
  plot: "24-18",
  address: "ABC",
  city: "Something",
  pin: "24398",
  phone: "041678995"
}, {
  plot: "24-19",
  address: "DEF",
  city: "Something",
  pin: "24397",
  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>

Answer 3

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

HTML：

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

JavaScript：

var locations = [{
        plot: "24-17",
        address: "XYZ",
        city: "Something",
        pin: "24399",
        phone: "041678993"
    },    {
        plot: "24-18",
        address: "ABC",
        city: "Something",
        pin: "24398",
        phone: "041678995"
    },    {
        plot: "24-19",
        address: "DEF",
        city: "Something",
        pin: "24397",
        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