Array from Object - Angular 8 / Ionic

Question

I have a method that gets data from service (api). results.component.ts

  showResult(){
this.searchService.showSearch().subscribe((res => {
  this.dataList = res;
  console.log(this.dataList);
}));

}

The data is in the following format. For a better overview I attach url with Json.

JSON

[,…]
0: {id: "12", id_user: "20", search_phrase: {searchWords: "erotika"}, set_date: "2019-12-15 19:33:14",…}
id: "12"
id_user: "20"
search_phrase: {searchWords: "erotika"}
set_date: "2019-12-15 19:33:14"
search_sent: "2019-12-15 22:21:48"
results_returned: null
last_result_date: null
search_active: "1"
remote_id: "5df6a3edb1824b0017766a07"
search_data: {data: [{header: "Atlas Erotika - Follow (Official Video) - YouTube",…},…]}
data: [{header: "Atlas Erotika - Follow (Official Video) - YouTube",…},…]
0: {header: "Atlas Erotika - Follow (Official Video) - YouTube",…}
1: {header: "Atlas Erotika - Mećava (Official Lyric Video) - YouTube",…}
2: {header: "Erotika (Video 1994) - IMDb",…}
3: {header: "erotika: Movies & TV - Amazon.com",…}
4: {header: "erotika - Wiktionary", url: "https://en.wiktionary.org › wiki › erotika",…}
5: {header: "#erotika hashtag on Twitter", url: "https://twitter.com › hashtag › erotika",…}
6: {header: "#erotika hashtag on Instagram • Photos and Videos",…}
7: {header: "Atlas Erotika Lyrics, Songs, and Albums | Genius", url: "https://genius.com › A",…}
8: {header: "Atlas Erotika – EXIT Festival 2020",…}
9: {header: "Erotika Biblion Society - Wikipedia",…}
1: {id: "13", id_user: "20", search_phrase: {searchWords: "hokej pardubice"},…}
2: {id: "14", id_user: "20", search_phrase: {searchWords: "Tomas Kalanek"},…}
3: {id: "15", id_user: "20", search_phrase: {searchWords: "praha"}, set_date: "2019-12-15 21:13:52",…}
4: {id: "16", id_user: "20", search_phrase: {searchWords: "East 17"}, set_date: "2019-12-15 21:13:54",…}

I need to get all the header from this format

First my idea was

 <ion-list>
      <ion-item *ngFor="let post of dataList">
        {{ post.search_data.data.header}}
      </ion-item>
  </ion-list>

But its not working. List is empty.

Thank you for any advice.

The data is an array, so you need to iterate over it too with a nested ngFor. — Elias Soares
– Elias Soares, Commented Dec 15, 2019 at 22:36

Elias Soares · Accepted Answer · 2019-12-15 23:07:15Z

1

Since the data contains an array, you need to iterate twice, one on results the on data:

<ion-list>
  <ion-item *ngFor="let post of dataList">
    <p *ngFor="let data of post.search_data.data">
      {{ data.header }}
    </p>
  </ion-item>
</ion-list>

I just exemplified with a p element, but you can use any element that you eant.

answered Dec 15, 2019 at 23:07

Elias Soares

10.3k4 gold badges36 silver badges62 bronze badges

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

Comments

panatoni · Accepted Answer · 2019-12-15 23:22:51Z

First you would need to iterate on your response inside a controller and after it splash it by concating array of arrays. Results is array of all headers which you can easy display on ngfor loop.

showResult(){
    this.searchService.showSearch().subscribe((res => {
        let deepLoop = [];
        if(res) {
            res.forEach((value) => {
                if(value['search_data'] && value['search_data']['data']){
                    deepLoop.push(value['search_data']['data']);
                }
            });
        }
        this.dataList = [].concat.apply([], deepLoop);
    }));
}

view:

<ion-list>
      <ion-item *ngFor="let post of dataList">
        {{ post }}
      </ion-item>
  </ion-list>

Collectives™ on Stack Overflow

Array from Object - Angular 8 / Ionic

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related