Ways to retrieve object array values

Question

Ways to retrieve object array values

How can I extract object array values from a data array? Here is the code I am using:

Component

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

When I run console.log(res['data']), I receive output 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 issue is... How do I access the data within these objects to display on an 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>

angular typescript

Answer 1

Answer №1

To access and use the response in HTML, you can first declare a local variable and assign the response to it:

list: any[] = []; <-- this line 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'])
      }
    });
}

In your HTML code:

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

Alternatively, if you want to display the mediaSource as a title:

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

This will show the mediaSource property of the first item!

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>

Answer 2

To access and use the response in HTML, you can first declare a local variable and assign the response to it:

list: any[] = []; <-- this line 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'])
      }
    });
}

In your HTML code:

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

Alternatively, if you want to display the mediaSource as a title:

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

This will show the mediaSource property of the first item!

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>

Answer 3

Answer №2

Save the information 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>

Answer 4

Save the information 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>

Ways to retrieve object array values

Answer №1

Answer №2

Similar questions

"Addressing the Flash of Unstyled Content (FOUC) in Angular Universal during

Utilizing Angular 4's routing feature to pass parameters just like a

What is the process for monitoring a property in Angular?

Setting up the view for 2-factor authentication in Umbraco 10: A guide for Angular or C# users

Best practices for managing Entity Framework models with mandatory navigation property for efficient data transfer

What is the best way to include custom RequestOptionsArgs in an Angular 2 request?

Incorporating JSON data into a reactive form group with nested objects and form arrays within nested components in Angular 13

Extract the checkbox value within a table

Whenever attempting to execute a protractor test using cucumber, a specific error message is displayed reading: "E/launcher - Process exited with error code 1"

Using TypeScript, creating a tagged template literal for running Jest tests with the `test.each`

Ways to effectively coordinate values between parent and child elements in Angular/PrimeNG

Uncertain about where and how to properly register a service in Angular 2

Best practice for incorporating the cq-prolyfill third-party JavaScript library into an Angular 5 application

`It is important to note that in Tailwind CSS, `h-8` does not supersede `h-4

Angular 2 (Final): Utilizing resetConfig for seamless integration of routes into lazy loaded modules

The incorrect initial state is causing issues in the Zustand state management on the Next.js server side

What is the best way to retrieve a value from async/await functions?

How to align text in the center of a card using Angular Bootstrap

Having trouble establishing a connection to the TyreORM Module database while using a Postgres Docker image

I'm experiencing a strange issue where my React component renders twice in production mode, despite having strict mode turned off. Can anyone advise me on