将多级 javascript 对象转换为 html 列表未按预期工作答案

【问题标题】：Multilevel javascript object into an html list not working as expected将多级 javascript 对象转换为 html 列表未按预期工作
【发布时间】：2021-08-02 04:57:08
【问题描述】：

所以我需要在 html 列表中显示对象。我有类似的对象：

    {
  "top": 123,
  "left": 456,
  "right": 789,
  "bottom": 100,
  "m1": 123,
  "m2": 456,
  "m3": 789,
  "m4": 100,
  "patterns": [1, 2, 3],
  "dimension": {
    "width": 123,
    "length": 456
  },
    }

我正在使用 react，当我获取该对象时，我将其解析为这个函数：

  createHtmlList = (obj) => {
    let output = '';
    Object.keys(obj).forEach((k) => {
      if (typeof obj[k] === 'object' && obj[k] !== null) {
        output += `<li>${k}<ul>`;
        output += this.createHtmlList(obj[k]);
        output += '</ul></li>';
      } else {
        output += `<li>${k} : ${obj[k]}</li>`;
      }
    });
    this.setState({
      output,
    });
  }

然后我将该输出保存为状态，输出是如下所示的字符串：

<li>top : 123</li><li>left : 456</li><li>right : 789</li><li>bottom : 100</li><li>m1 : 123</li><li>m2 : 456</li><li>m3 : 789</li><li>m4 : 100</li><li>patterns<ul><li>0 : 1</li><li>1 : 2</li><li>2 : 3</li></ul></li><li>dimension<ul><li>width : 123</li><li>length : 456</li></ul></li>

我将其解析为 html div 标签

              <div dangerouslySetInnerHTML={{ __html: this.state.output }} />

所以我很感兴趣如何在最终输出的值前面去掉数组中的数字

现在输出：

    patterns:
     0 : 1
     1 : 2
     2 : 3
    dimension
     width: 123
     lenght: 456
     top: 123
     left: 456
     right: 789
     bottom: 100
     m1: 123
     m2: 456
     m3 789
     m4: 100

预期输出（如果可能的话，更好的版本:)）：

    patterns: 1,2,3
    dimension
     width: 123
     lenght: 456
     top: 123
     left: 456
     right: 789
     bottom: 100
     m1: 123
     m2: 456
     m3 789
     m4: 100

或

    patterns: 1,2,3
    dimension
     width: 123
     lenght: 456
     top: 123
     left: 456
     right: 789
     bottom: 100
     m1: 123
     m2: 456
     m3 789
     m4: 100

【问题讨论】：

Array.isArray() 并以不同方式处理

标签： javascript html reactjs list object

【解决方案1】：

您不需要将 jsx 存储在 state 中。简单地做这样的事情。

  const createHtmlList = (obj) => {
    return Object.keys(obj).map((item) => (
      <li>
        {item} :
        {typeof obj[item] !== "object" ? (
          obj[item]
        ) : Array.isArray(obj[item]) ? (
          obj[item].join(", ")
        ) : (
          <ul>{createHtmlList(obj[item])}</ul>
        )}
      </li>
    ));
  };

然后像这样输出

return <div>{createHtmlList(obj)}</div>

【讨论】：