找不到将 json 显示为 html 的正确方法

Question

所以在我问之前，我努力寻找任何解决方案。

我有一个巨大且非常随机的 json，就像它不是那么随机但有时您可以使用或不使用特定字段来获取它，有时这些字段嵌套了不同类型的数据（有时可以是数组/字符串/另一个对象和等等..)

在网上阅读了一些有关角度管道的信息后，我只是尝试创建一个带有管道的 html 模板来呈现来自 json 的数据，它可以工作，但是..

我想渲染数据，例如这个 json：

[
    {
        "id": "XXX",
        "version": 1,
        "head": {
            "text": "Main title",
            "sub": {
                "value": "next"
            },
            "place": "secondary"
        },
        "body": [
            {
                "id": "XXX1",
                "info": "three little birds",
                "extended": {
                    "spl": {
                        "text": "song",
                        "type": {
                            "value": "a"
                        }
                    }
                }
            },
            {
                "id": "XXX2",
                "info": [
                    "how are you?"
                ],
                "extended": {
                    "spl": {
                        "text": "just"
                        "non-type": {
                            "value": "abc"
                        }
                    }
                }
            }
        ]
    }
]

让它以 html 的形式显示：

<div class="head">
  <div *ngFor="let head of heads">
    <span class="headTitle">
      <h3>{{Head Title}}</h3>
    </span>

    <div *ngFor="let sub of subs">
      <span>[{{sub-value}}]&nbsp;</span>
    </div>

    <div *ngFor="let place of places">
      <span>{{place}}&nbsp;</span>
    </div>

    <div *ngFor="let body of bodys">
      <div class="extended">
        <div class="spl">
          <span>{{text}}&nbsp;</span>
          <span>{{type}}&nbsp;</span>
          <span>{{non-type}}&nbsp;</span>
        </div>
      </div>
    </div>

有可能以相同的顺序获取数据，尽管如果它的数组或对象在字段内！正如我所说，它可以嵌套很多变化，所以我需要为每种类型编写验证器。但是如何控制数据的显示呢？分割成块进行渲染

Answer 1

如果您只想让对象以 JSON 格式显示（不带格式），您可以使用 Angular 的json pipe。

如果你想漂亮地打印 JSON（带有断线/缩进），你必须自己实现它/使用一个包。 一个简单的漂亮管道可以通过以下方式完成（刚想出来的）：

@Pipe({
  name: 'prettyjson'
})
export class PrettyJsonPipe implements PipeTransform {

  transform(value: any, args?: any): any {
    return JSON.stringify(value, null, 4)
    .replace(/ /g, ' ')
      .replace(/\n/g, '<br/>');
  }

} 

然后在你的模板中使用如下

<div [innerHTML]="myJSON | prettyjson"></div>