在 <div> 中显示对象数组中每个对象的键值对，每个对象都有换行符答案

【问题标题】：In a <div> show the key value pairs for each object in an array of objects with line breaks for each在 <div> 中显示对象数组中每个对象的键值对，每个对象都有换行符
【发布时间】：2021-02-28 17:42:51
【问题描述】：

我有一个对象数组，我需要在 div 或 h6 中显示每个对象的键值对。我想将文本格式化为：键：值（此处换行）键：值（此处换行）... 到目前为止我的代码是：

Index.html:
  <div class="game-history"></div>

JS:
  const gameHistoryReadable = response.games.map(item => {
    let gamesTemp = ''
    for (const [key, value] of Object.entries(item)) {
      gamesTemp += key + ': ' + value + '\n'
    }
    return gamesTemp
  })
  $('.game-history').text('')
  $('.game-history').text(gameHistoryReadable)

显示：单元格：,,,,,,,, over: false _id: 602fa7c46bc4480017fb05fa 所有者: 602589d0b3d544001780bb69 创建时间: 2021-02-19T11:57:56.087Z 更新时间: 2021-02-19T11:57:56.087Z, 单元格: __v ,,,,,,, over: false _id: 602fa7f26bc4480017fb05fb 所有者: 602589d0b3d544001780bb69 创建时间: 2021-02-19T11:58:42.605Z 更新时间: 2021-02-19T11:58:42,.605Z,__v,: 0 ,,,, over: false _id: 60300f8a0d2da000170123cd 所有者: 602589d0b3d544001780bb69 创建时间: 2021-02-19T19:20:42.898Z 更新时间: 2021-02-19T19:20:42.898Z ,,,, 单元格, over: false _id: 603011220d2da000170123d9 所有者: 602589d0b3d544001780bb69 创建时间: 2021-02-19T19:27:30.222Z 更新时间: 2021-02-19T19:27:30.222Z ,,,, ,,:s: false _id: 603011a60d2da000170123dd 所有者: 602589d0b3d544001780bb69 createdAt: 2021-02-19T19:29:42.202Z updatedAt: 2021-02-19T19:29:42.202Z __v: 0,,,,, over 603011aa0d2da000170123de 所有者：602589d0b3d544001780bb69 创建于：2021-02-19T19:29:46.074Z 更新于：2021-02-19T19 :29:46.074Z __v: 0 ,单元格: ,,,,,,,, over: false _id: 603012260d2da000170123df 所有者: 602589d0b3d544001780bb69 创建时间: 2021-02-19T19:31:50.484Z 更新时间: 2031:-2:2 50.484Z __v: 0 ,cells: ,,,,,,,, over: false _id: 603013d20d2da000170123e0 所有者: 602589d0b3d544001780bb69 createdAt: 2021-02-19T19:38:58.767Z updatedAt: 2021-02-

【问题讨论】：

那应该怎么看？或者我们应该猜测什么是键或值？为什么不将\n 更改为<br> 并将其作为HTML 而不是文本.html(gameHistoryReadable) 插入呢？您是否也尝试将您的 game-history div 更改为 <pre> 元素？

标签： javascript object newline line-breaks

【解决方案1】：

您好，欢迎来到 Stackoverflow ?

由于我不确定response.games 会是什么样子，所以我只是假设它看起来或多或少像这样，如果我错了，请纠正我?：

[
  {
    "_id": "RANDOM_ID",
    "owner": "602589d0b3d544001780bb69",
    createdAt: "DATE"
  }
  ...
]

还有关于换行符，如果你想在屏幕上渲染一些文本，你应该使用换行符标签<br />而不是/n

还有一件事，如果你试图注入一些包含一些 HTML 标签的东西，你应该使用$().html

const response = {
  games: [
    {
      "_id": "602fa7c46bc4480017fb05fa",
      "owner": "602589d0b3d544001780bb69",
      "createdAt": "2021-02-19T11:57:56.087Z",
      "updatedAt": "2021-02-19T11:57:56.087Z"
    },
    {
      "_id": "602fa7f26bc4480017fb05fb",
      "owner": "602589d0b3d544001780bb69",
      "createdAt": "2021-02-19T11:58:42.605Z",
      "updatedAt": "2021-02-19T11:58:42.605Z"
    }
  ]
}

const gameHistoryReadable = response.games.map(item => {
  let gamesTemp = ''
  for (const [key, value] of Object.entries(item)) {
    gamesTemp += `${key}: ${value} <br />`;
  }
  return gamesTemp
})
$('.game-history').text('')
$('.game-history').html(gameHistoryReadable)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="game-history"></div>

【讨论】：

完美！就像我想要的那样工作。谢谢。