从响应数组（Javascript）动态生成innerHTML元素答案

【问题标题】：Dynamically generate innerHTML elements from a response array (Javascript)从响应数组（Javascript）动态生成innerHTML元素
【发布时间】：2021-07-31 12:22:08
【问题描述】：

我是一个使用 JavaScript 语法的新手，在调整我找到的任何解决方案以匹配此语法时遇到了麻烦。

这是我的代码的一部分： var arr1 = 响应；控制台.log(arr1);

**这是响应/控制台记录的 arr1：


{
  "channels": {
    "1620184778889x527731420801269760": [
      {
        "channel": "1620184778889x527731420801269760",
        "timetoken": "16204064644032062",
        "message": {
          "content": "44444444444",
          "sender": "Jeremy"
        },
        "messageType": null,
        "uuid": "1617237881603x986210451354598100"
      }
    ],
    "1618599897203x154294096401530880": [
      {
        "channel": "1618599897203x154294096401530880",
        "timetoken": "16203351496721278",
        "message": {
          "content": "fffffffdd",
          "sender": "Jeremy"
        },
        "messageType": null,
        "uuid": "1617237881603x986210451354598100"
      }
    ],
    "1618613571551x955443898854408200": [
      {
        "channel": "1618613571551x955443898854408200",
        "timetoken": "16204261556065826",
        "message": {
          "content": "78777",
          "sender": "Jeremy"
        },
        "messageType": null,
        "uuid": "1617237881603x986210451354598100"
      }
    ]
  }
}

尝试：

我需要获取以下数据： 1.渠道 2.timetoken 3.消息>内容 4.message > 发件人

然后我需要为数组中的每个频道动态生成一个 innerHTML 属性（频道的数量会经常变化）。

返回的每个频道都是这样的（语法不正确，只是一个例子）： document.getElementById(channel).innerHTML = sender + ' ' + content + ' ' + timetoken;

我很难调整其他类似的解决方案来检索嵌套数组项和使用循环。我想我需要一个循环来通过通道来检索数据，还需要一个循环来生成innerHTML项目，但是我已经尝试了好几天了，但还是无法得到它，我希望精通的人可以提供帮助。

谢谢。

【问题讨论】：

您好，您能分享一下您希望如何在 html 中显示它，或者可以分享 channelit 元素在 html 中的样子吗？
对于每个频道（在数组“Channels”中），html 中都会有一个
。（id="channel" 是每个数字的字符串，而不是单词“channel”）。这已经动态完成了。我正在尝试将每个通道的数组数据写入该 p 元素。 html 中的最终结果（每个）看起来像
Sender Content Timetoken
所以我试图将每个通道的“Sender Content Timetoken”数据写入其相应的 ID （这是数字的通道字符串）。

标签： javascript arrays loops dom

【解决方案1】：

<!DOCTYPE html>
<html>

<head>
    <title>Page Title</title>
</head>

<body>

</body>

</html>

<script>

    let dataObject = {
        "channels": {

            "1620184778889x527731420801269760": [

                {

                    "channel": "1620184778889x527731420801269760",

                    "timetoken": "16204064644032062",

                    "message": {

                        "content": "44444444444",

                        "sender": "Jeremy"

                    },

                    "messageType": null,

                    "uuid": "1617237881603x986210451354598100"

                }

            ],

            "1618599897203x154294096401530880": [

                {

                    "channel": "1618599897203x154294096401530880",

                    "timetoken": "16203351496721278",

                    "message": {

                        "content": "fffffffdd",

                        "sender": "Jeremy"

                    },

                    "messageType": null,

                    "uuid": "1617237881603x986210451354598100"

                }

            ],

            "1618613571551x955443898854408200": [

                {

                    "channel": "1618613571551x955443898854408200",

                    "timetoken": "16204261556065826",

                    "message": {

                        "content": "78777",

                        "sender": "Jeremy"

                    },

                    "messageType": null,

                    "uuid": "1617237881603x986210451354598100"

                }

            ]

        }
    }
    for (let channelName in dataObject.channels) {
        for (let item of dataObject.channels[channelName]) {
            const channel = item.channel;
            const timetoken = item.timetoken;
            const content = item.message.content;
            const sender = item.message.sender;
            const messageType = item.messageType;
            const uuid = item.uuid;
            // do whatever you want with these data
            console.log(channel, timetoken, content, sender, messageType, uuid);
        }
    }


</script>

【讨论】：

非常感谢。你帮了我很多！！这是完美的。