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

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>