时间戳

首页 > 解决方案 > 如何遍历打字稿中定义的json

json - 如何遍历打字稿中定义的json

问题描述

我正在使用 Angular。有一个类似的问题，但没有回答 -

如何使用打字稿遍历 JSON 对象

我没有收到任何错误或警告。但我也没有得到输出。我正在尝试模仿twitter-api。我json object在我的打字稿中创建了一个，我试图在 HTML 中循环遍历我的 json。这是我的代码：

twitter-timeline.component.ts

  output: JSON;
  twitter_data:any = {
      statuses: [
        {screen_name:"tanzeel", status: "wonderful day, enjoying at beach"},
        {screen_name:"pablo", status: "what a lovely morning #surfing #beach #relax"},
        {screen_name:"ricky", status: "feeling sick :-( #typhoid"}
      ]
  }

  ngOnInit() {
    this.output = <JSON>this.twitter_data;
  }

twitter-timeline.component.html

<div class="container" *ngFor="let tweets of output; let i=index">
    <div class="row">
        <div class="col-sm-12 col-md-12 col-lg-12 text-column">
            <p class="screen-name">{{tweets.statuses[i].screen_name}}</p>
            <p class="user-status">{{tweets.statuses[i].status}}</p>
            <br>
        </div>
    </div>
</div>

我创建 JSON 对象的方式有什么问题，或者我在 HTML 中读取值的方式有什么问题。请纠正我。

我也尝试过这种 JSON 结构：

output: JSON;
obj: any = 
{
"col1":{"Attribute1": "value1", "Attribute2": "value2", "Attribute3": "value3"},
"col2":{"Attribute1": "value4", "Attribute2": "value5", "Attribute3": "value6"}, 
"col3":{"Attribute1": "value7", "Attribute2": "value8", "Attribute3": "value9"} 
};

标签： jsonangulartypescript

解决方案

您需要更改*ngFor为*ngFor="let tweets of output.statuses; let i=index".

output是一个对象，所以你不能像这样迭代对象，而是迭代数组output.statuses，然后你可以获得相关的数据，比如，

        <p class="screen-name">{{tweets.screen_name}}</p>
        <p class="user-status">{{tweets.status}}</p>

您需要更改let tweets of output 为 let tweets of output.statuses.

twitter-timeline.component.html

<div class="container" *ngFor="let tweets of output.statuses; let i=index">
    <div class="row">
        <div class="col-sm-12 col-md-12 col-lg-12 text-column">
            <p class="screen-name">{{tweets.screen_name}}</p>
            <p class="user-status">{{tweets.status}}</p>
            <br>
        </div>
    </div>
</div>

工作堆栈闪电战

推荐阅读