How to loop through json defined in typescript

Question

I'm working with Angular. There is a similar question but not answered -

How to loop through a JSON object with typescript

I'm not getting any error or warning. But I'm not getting the output also. I'm trying to imitate twitter-api. I've created a json object in my typescript and I'm trying to loop through my json in HTML. Here's my code:

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>

Is there anything wrong with the way I'm creating JSON object, or there's something wrong with the way I'm reading values in HTML. Please correct me.

I also tried this kind of JSON structure:

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

Maniraj Murugan · Accepted Answer · 2020-02-19 06:52:57Z

2

You need to change *ngFor as *ngFor="let tweets of output.statuses; let i=index" .

output is an object so, you cannot iterate object like this, instead iterate the array output.statuses and then you can get the related data like,

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

You need to change let tweets of output to 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>

Working Stackblitz

edited Feb 19, 2020 at 6:52

answered Feb 19, 2020 at 5:56

Maniraj Murugan

9,11424 gold badges77 silver badges125 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tanzeel Over a year ago

Oh. Now I understood. So the problem was the way I was reading the object and not the object itself. Thank you anna :-)

Maniraj Murugan Over a year ago

@Tanzeel, If you want to iterate the object, then you should check for angular doc on keyvalue pipe angular.io/api/common/KeyValuePipe .. And glad to help you again bro..

Collectives™ on Stack Overflow

How to loop through json defined in typescript

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related