如何 append<li> 到每个数组？</li>

Question

今天我的头过热了。我的代码需要帮助。 我的英语不太好，所以很难解释我的问题。 所以我把问题放在 HTML 我需要从 JS 获得什么样的风格。 添加things.json文件为例，并添加了 JS 代码。

<!-- What I'm getting: -->

<h2>Table</h2>

<ul>
  <li>brown, black, white</li>
</ul>


<!-- What I need to get: -->

<h2>Table</h2>

<ul>
  <li>brown</li>
  <li>black</li>
  <li>white</li>
</ul>

有things.json文件的例子：

[
 {
  "thing": "table",
  "color": [
   "brown",
   "black",
   "white"
   ]
  }
  {
  "thing": "chair",
  "color": [
   "yellow",
   "black",
   "blue"
   ]
  }
  {
  "thing": "bed",
  "color": [
   "red",
   "blue",
   "green"
   ]
  }
]

有我的 function 的例子：

 const ENDPOINT = 'things.json' async function getThing(url) { const resp = await fetch(url) const data = await resp.json() data.forEach(appendToHtml) return data } getThing(ENDPOINT).then((value) => { console.log('getThings', value) }) function appendToHtml(data) { const divEl = document.createElement('div') const h2El = document.createElement('h2') const liEl = document.createElement('li') h2El.textContent = data.thing liEl.textContent = data.color outputEl.append(divEl) divEl.append(h2El) divEl.append(liEl) return divEl }

Answer 1

假设您的 json 是一组对象（带颜色），您将需要 2级循环。 数组中的每个项目（对象）一个。 每个 object 的另一个从其 colors （这也是一个数组）构建列表。

 var arr = [{ "thing": "table", "color": [ "brown", "black", "white" ] }, { "thing": "chair", "color": [ "yellow", "black", "blue" ] }, { "thing": "bed", "color": [ "red", "blue", "green" ] }]; var outputEl = document.body; function appendToHtml(data) { const divEl = document.createElement('div') const h2El = document.createElement('h2') const list_container = document.createElement('div') h2El.textContent = data.thing outputEl.append(divEl) divEl.append(h2El) divEl.append(list_container) list_container.innerHTML = appendToList(data.color); return divEl } function appendToList(colors) { return "<ul>" + colors.map(color=>`<li>${color}</li>`).join("\n") + "</ul>" } arr.forEach(function(obj) { appendToHtml(obj) })

 <body> </body>

如何 append<li> 到每个数组？</li>

问题描述

1 个解决方案

解决方案1
0 2022-08-18 23:01:33

如何 append<li> 到每个数组？</li>

问题描述

1 个解决方案

解决方案1 0 2022-08-18 23:01:33

解决方案1
0 2022-08-18 23:01:33