Reading an Array inside an Object within Angular

Question

Maybe someone can help me out. I have an Array within an object. I can get just the Array(Articles) out of the object. That is not my problem. My problem is that i am now using an *ngFor within Angular to read the list of Articles, but there is no id. The IDs are generated.

How can I get Angular to read from this?

I can read the array by placing in articles[0] or articles1 but i need to get all articles and individually specifying is not going to work. Any help would be amazing! Thanks guys.

TS Page

blog: string[];
blogs: string[] = [];

ngOnInit() {
        this.getNewsData().subscribe((blog) => {
            this.blogs.push(blog);
            console.log(blog.articles);
        });

component.html file

<mat-card class="example-card" *ngFor="let blog of blogs.articles">
        <mat-card-header>
          <div mat-card-avatar class="example-header-image"></div>
          <mat-card-title>{{ blog.title }}</mat-card-title>
          <mat-card-subtitle>{{ blog.author }}</mat-card-subtitle>
        </mat-card-header>
        <img mat-card-image src="{{ blog.urlToImage }}" alt="Photo of a Shiba Inu">
        <mat-card-content>
          <p>
            {{ blog.titles }}
          </p>
        </mat-card-content>
        <mat-card-actions>
          <button mat-button>LIKE</button>
          <button mat-button>SHARE</button>
        </mat-card-actions>
</mat-card>

What's wrong with <p *ngFor="let x of yourObject.articles">{{x.title}}</p> ? — bugs
– bugs, Commented May 16, 2018 at 13:34
O man, if its these easy i am going to kick myself. I will recheck my code. — Kevin Summersill
– Kevin Summersill, Commented May 16, 2018 at 13:45
Still cannot figure it out. I have updated the Question with the component.ts file code. That way you can see what my object is. — Kevin Summersill
– Kevin Summersill, Commented May 16, 2018 at 13:50
@KevinSummersill what you added doesn't really provide any more context. What's the final shape of blogs? What does your HTML look like? — bugs
– bugs, Commented May 16, 2018 at 13:53

bugs · Accepted Answer · 2018-05-16 14:11:53Z

1

The problem is that you are pushing the object you get from getNewsData() into an array, but that doesn't really make much sense as you only care about the object.

Change your code to this:

blogs;

ngOnInit() {
  this.getNewsData().subscribe((blogs) => {
    this.blogs = blogs;
});

edited May 16, 2018 at 14:11

answered May 16, 2018 at 14:02

bugs

15.4k6 gold badges53 silver badges55 bronze badges

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

2 Comments

Kevin Summersill Over a year ago

Your amazing!!!!!! So every time i use the push() method, i am making it go into an array? I knew posting this to stackoverflow was worth it. Thank you for making my day great.

bugs Over a year ago

Yes, array.push(thing) adds the thing to the array. Glad it helped :)

Vinod Kolla · Accepted Answer · 2018-05-16 13:44:35Z

0

Not sure why you need an id to loop through using *ngFor. It should just loop through every article in array and dispays it. If you want to give an id to each attribute in the array, generate one with a string concatenating with index.

answered May 16, 2018 at 13:44

Vinod Kolla

3346 silver badges18 bronze badges

1 Comment

Kevin Summersill Over a year ago

Yea that's why this is driving me crazy. I didn't think i needed an id to read each value in an array.

Collectives™ on Stack Overflow

Reading an Array inside an Object within Angular

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related