Как l oop через json определено в машинописи

Question

Я работаю с Angular. Есть похожий вопрос, но без ответа -

Как l oop через JSON объект с машинописью

Я не получаю никакой ошибки или предупреждения , Но я не получаю вывод тоже. Я пытаюсь подражать twitter-api. Я набрал json object в моей машинописи и пытаюсь провести oop через json в HTML. Вот мой код:

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"} 
};

Answer 1

Вам нужно изменить *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>

Рабочая Stackblitz