How to get object array value

Question

How to get object array value from data array? Below is my code

Component

FmtNews(mediasource) {
    let body = mediasource;
    console.log("Test body:" +body)
    this.commonService.getTopNews(body)
    .subscribe((res) => {
      if (res['status'].code === 102) {
        // this.headerService.isLoading = false;
         console.log(res['data'])
      }
    });
}

When I console.log(res['data']) I got example like this.

(4)[..]
 0: Object (mediaSource: "News Today", pageUrl: "https://www.newstoday.com", contents:)
 1:Object (mediaSource: "News Today", pageUrl: "https://www.newstoday.com", contents:)
 2:Object (mediaSource: "News Today", pageUrl: "https://www.newstoday.com", contents:)
 3:Object (mediaSource: "News Today", pageUrl: "https://www.newstoday.com", contents:)

My problem is.., How I want to get data in object to display in HTML page

HTML

<div class="media">
  <img class="mr-3" src="..." alt="Generic placeholder image">
  <div class="media-body">
    <h5 class="mt-0">title here</h5>
    <span>url here</span>
    <div>
    contents here
    </div>
  </div>
</div>

is res.data an array of objects? if so then you can use *ngFor in your template. — Ramesh Reddy
– Ramesh Reddy, Commented Feb 5, 2020 at 6:37
@Ramesh but that res.data is available for the scope only which can't be used in HTML directly! — Prashant Pimpale
– Prashant Pimpale, Commented Feb 5, 2020 at 6:40
Yes res.data is an array of objects... But how i want to make a difference let say..mediaSource: "News Today" I want to display under title.` How should I do? — javiens
– javiens, Commented Feb 5, 2020 at 6:42
@PrashantPimpale Of course, he needs to assign that to a new variable I'm just saying that he can use *ngFor structural directive because he has an array. — Ramesh Reddy
– Ramesh Reddy, Commented Feb 5, 2020 at 6:43

Prashant Pimpale · Accepted Answer · 2020-02-05 06:59:01Z

3

Just declare a local variable and assign the response to that variable which can be available to use in HTML:

list: any[] = []; <-- here

FmtNews(mediasource) {
    let body = mediasource;
    console.log("Test body:" +body)
    this.commonService.getTopNews(body)
    .subscribe((res) => {
      if (res['status'].code === 102) {
         this.list = res['data'];
         console.log(res['data'])
      }
    });
}

HTML:

<div *ngFor="let obj of list">
   {{obj.mediaSource}}
</div>

OR

if you want to display a mediaSource as a title then:

<div>{{ list[0]?.mediaSource }}</div>

which will display the first item's mediaSource property!

EDIT

<div class="media" *ngFor="let obj of list">
  <img class="mr-3" src="..." alt="Generic placeholder image">
  <div class="media-body">
    <h5 class="mt-0">{{ obj.mediaSource }}</h5>
    <span>{{ obj.pageUrl}}</span>
    <div>
    {{ obj.contents}}
    </div>
  </div>
</div>

edited Feb 5, 2020 at 6:59

answered Feb 5, 2020 at 6:38

Prashant Pimpale

10.7k10 gold badges52 silver badges88 bronze badges

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

2 Comments

javiens Over a year ago

No.., I dont want like this...You can refer my question, i've edited it

javiens Over a year ago

I want to display all

Karthik_Siddh · Accepted Answer · 2020-02-05 07:00:28Z

1

Store the data to a variable this.data=res['data']

In your HTML,

<div class="media">
  <img class="mr-3" src="..." alt="Generic placeholder image">
  <div class="media-body" *ngFor="let obj of data">
    <h5 class="mt-0">{{obj.mediaSource}}</h5>
    <span>{{obj.pageUrl}}</span>
    <div>{{obj.contents}}</div>
  </div>
</div>

answered Feb 5, 2020 at 7:00

Karthik_Siddh

1114 bronze badges

Collectives™ on Stack Overflow

How to get object array value

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related