Yogesh Chauhan's Blog

How to convert an object from API to JSON array in Angular 9?

in Angular on May 16, 2020

If you're getting the data using API, it will be easier to use an array to display data rather than an object.

Declare your array first in your component class:


...
array: [];
...

Then use JSON.stringify and JSON.parse to convert the object into an array.


...
...
ngOnInit()    {
    this.service.method()
    .subscribe(
        data=>
      {
        this.array = JSON.parse(JSON.stringify(data.object));
      }
    )
}
...

You can use that array to print your results from API data in html template.

For e.g.


<p>{{array['something']}}</p>

Most Read

#1 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #2 How to add Read More Read Less Button using JavaScript? #3 How to check if radio button is checked or not using JavaScript? #4 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #5 How to uninstall Cocoapods from the Mac OS? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
How to import a CSS file using PHP code and not HTML code?PHPapply_filters function in WordPressWordPressSome SQL LIKE Operators We Need to Keep in MindSQL/MySQLHow to Sort (Shuffle) an Array in Random Order in JavaScript?JavaScriptWhen you don’t want to @forward every member in SCSS (Sass)SCSS12 URLSearchParams methods in JavaScriptJavaScriptHow to Make CSS Lists Bullets Smaller?CSSWhat are Null Sessions?MiscellaneousSlider animation using CSS transform propertyCSSPostgreSQL BETWEENPostgresCreate a responsive pricing table using simple HTML and CSSCSSABS and NEG functions in Envision BasicEnvision Basic