Question

我正在尝试从下面的对象响应中生成html标签，

 const content = {
  "data": {
    "areas": [{
      "sections": [{
        "rjf": [
          {
            "type": "heading-1",
            "depth": 0,
            "text": "This is a sample heading"
          },
          {
            "type": "paragraph",
            "depth": 1,
            "text": "This a sample text /n"
          },
        ]
      }]
    }]
  }
}

我想在这里实现的是，我想循环考虑每个type并附加适当的html标签。

在以上content中，我们有paragraph和heading 1类型。所以最终输出应该是这样的，

<h1>This is a sample heading</h1>
<p>This is a sample text<p>

我正在寻找类似的东西

  private generateHtml (content) {
    let contentString = [];

    switch(type) {
      case 'heading-1': return `<h1>${contentString.join('')}</h1>`;
      case 'paragraph': return `<p>${contentString.join('')}</p>`;

  }

从我的项目开始，一直在寻找暂挂代码

注意：-上面的代码不起作用，仅用于说明我要查找的内容。

Answer 1

您可以使用此方法，因为最好不要直接使用html中的函数，因为这会导致Web浏览器内存过载。因此，您需要重构一些数据。

原始内容

   content = {
    "data": {
      "areas": [{
        "sections": [{
          "rjf": [
            {
              "type": "heading-1",
              "depth": 0,
              "text": "This is a sample heading"
            },
            {
              "type": "paragraph",
              "depth": 1,
              "text": "This a sample text /n"
            },
          ]
        }]
      }]
    }
  };

其他功能

    constructor() {
    this.content.data.areas.forEach((val)=>{
        val.sections.forEach((elem)=>{
          elem.rjf.forEach(async (data)=>{
            data['generatedHtml'] = await this.generateHtml(data);
          });
        });
    });
  }

  private generateHtml (elem: any): string {
    switch(elem.type) {
      case 'heading-1': return `<h1>${elem.text.trim()}</h1>`;
      case 'paragraph': return `<p>${elem.text.trim()}</p>`;
    }
  }

此外，您还需要使用正则表达式将任何\n转换为<br>。

这里是ONLINE DEMO。让我知道它是否对您有用。快乐编码...：D

已编辑：

这是HTML代码

<div *ngFor="let cont of content?.data?.areas">
  <div *ngFor="let section of cont?.sections">
    <div *ngFor="let data of section?.rjf">
      <span [innerHTML]="data.generatedHtml"></span>
    </div>
  </div>
</div>

从对象数组生成HTML

1 个答案: