How I can parse object to array in angular?

Question

I get an object from an array of elements, and I need to parse it as an array and display it as a list, can you tell me how to do this? I only know how to handle requests.

html:

<ul *ngFor="let filtered of reposFiltered">
              <li>
               {{filtered.name}}
               {{filtered.description}}
               {{filtered.language}}
               {{filtered.html}}
               </li>
            </ul>

.ts:

  // Required data
    selectRepo(data){
      this.reposFiltered = data;
      console.log(data)
    }

massive with objects:

0: cu {name: "30daysoflaptops.github.io", description: null, language: "CSS", html: "https://github.com/mojombo/30daysoflaptops.github.io"}
1: cu {name: "asteroids", description: "Destroy your Atom editor, Asteroids style!", language: "JavaScript", html: "https://github.com/mojombo/asteroids"}
etc

what is the cu in the objects array. This is wrong syntax for an Object — tuhin47
– tuhin47, Commented Aug 10, 2021 at 15:02

Erwin van Hoof · Accepted Answer · 2021-08-13 04:02:57Z

1

If you only wish to see the data in the rows you could use the following code:

// the data
const data = [
    {name: "30daysoflaptops.github.io", description: null, language: "CSS", html: "https://github.com/mojombo/30daysoflaptops.github.io" }, 
    {name: "asteroids", description: "Destroy your Atom editor, Asteroids style!", language: "JavaScript", html: "https://github.com/mojombo/asteroids"}
];

// Required data
selectRepo(data){
  this.reposFiltered = data.map(row => Object.values(row));
}

//html 
<!-- iterate through all data rows --> 
<ul *ngFor="let row of reposFiltered">
    <!-- iterate through all values -->
  <li *ngFor="let value of row">
    {{ value }}
    </li>
</ul>

edited Aug 13, 2021 at 4:02

answered Aug 10, 2021 at 15:24

Erwin van Hoof

1,0126 silver badges17 bronze badges

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

Comments

danday74 · Accepted Answer · 2021-08-10 15:17:27Z

0

To iterate over the properties on an object you need to use the https://angular.io/api/common/KeyValuePipe

something like this:

<ul *ngFor="let filtered of reposFiltered | keyvalue">
  <li>
    {{filtered.value.name}}
    {{filtered.value.description}}
    {{filtered.value.language}}
    {{filtered.value.html}}
  </li>
</ul>

If you need to access the key:

{{filtered.key}}

This code is useful for debugging:

{{filtered.key | json}}
{{filtered.value | json}}

answered Aug 10, 2021 at 15:17

danday74

58.1k56 gold badges273 silver badges337 bronze badges

Collectives™ on Stack Overflow

How I can parse object to array in angular?

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