Angular 4: Transform a string into an array containing multiple objects

Question

Angular 4: Transform a string into an array containing multiple objects

Recently, I received an API response that looks like this:

{
   "status": "success",
   "code": 0,
   "message": "version list",
   "payload" : "[{\"code\":\"AB\",\"short\":\"AB\",\"name\":\"Alberta\",\"country\":\"CA\"},{\"code\":\"BC\",\"short\":\"BC\",\"name\":\"British Columbia\",\"country\":\"CA\"}]"

}

I am facing a challenge where I need to extract the names of different objects from the payload. The issue is that the payload is returned as a string.

Despite my efforts to retrieve the object names, I have not been successful so far!

getAllPayload() {
  this.myService.getpayload().subscribe(
     data => {
        this.values= data;
     }
   );
}

Additionally,

<select class="form-control">                     
   <option *ngFor="let value of values.payload" >
      {{value.name}}
   </option>
</select>

Even attempting to parse the object using JSON.parse has been unsuccessful.

I'm stuck! Can anyone guide me on how to properly parse the payload and fetch the different names?

javascript json angular typescript object

Answer 1

Answer №1

Your String contains unescaped quotes which need to be fixed first.

Use JSON.parse() method

var result = {
"payload" : "[{\"code\":\"AB\",\"short\":\"AB\",\"name\":\"Alberta\",\"country\":\"CA\"},{\"code\":\"BC\",\"short\":\"BC\",\"name\":\"British Columbia\",\"country\":\"CA\"}]"
};
  
var payloadData = JSON.parse(result.payload);
console.log( payloadData )
console.log( Array.isArray(payloadData) ) // true

Answer 2

Your String contains unescaped quotes which need to be fixed first.

Use JSON.parse() method

var result = {
"payload" : "[{\"code\":\"AB\",\"short\":\"AB\",\"name\":\"Alberta\",\"country\":\"CA\"},{\"code\":\"BC\",\"short\":\"BC\",\"name\":\"British Columbia\",\"country\":\"CA\"}]"
};
  
var payloadData = JSON.parse(result.payload);
console.log( payloadData )
console.log( Array.isArray(payloadData) ) // true

Answer 3

Answer №2

To achieve your goal, you can follow this approach:

retrieveAllData() {
this.dataService.fetchData().subscribe(
    result => {
    this.items = JSON.parse(result.payload) // This code snippet is responsible for converting the payload string into an array.
    
    ;
  }
 );

After that, in your HTML template

<select *ngFor="let item of items" >
     {{item.name}}</option>
 </select>

This should provide you with a solution to your issue.

Answer 4

To achieve your goal, you can follow this approach:

retrieveAllData() {
this.dataService.fetchData().subscribe(
    result => {
    this.items = JSON.parse(result.payload) // This code snippet is responsible for converting the payload string into an array.
    
    ;
  }
 );

After that, in your HTML template

<select *ngFor="let item of items" >
     {{item.name}}</option>
 </select>

This should provide you with a solution to your issue.

Angular 4: Transform a string into an array containing multiple objects

Answer №1

Answer №2

Similar questions

React is failing to display identical values for each item being mapped in the same sequence

Placing a blank object after every line within a TypeScript array

Ajax calls for validations are failing to trigger a response from PHP

API Broker, transforming JSON into DataFrame

Encountering a hiccup while attempting to initialize a fresh Angular project with the command "ng new my

Switching from Vanilla JS to Vue.js, dealing with querySelector problems

Guide to importing an npm module with a Typescript main file in a Typescript project

Encountering a JSONDecodeError when sending a python dictionary via AJAX post

"Run JavaScript code within the boundaries of the start and end of XMLHttpRequest

Merge a dropdown menu with an alphabetically arranged list that is interactive with clickable options

Guide on creating a JSON within a union function that results in an error

Parsing JSON data in an Android application using HTTP response

Guide for sending token through Authorization in Laravel 8 API

Nested ControlGroup in Angular2's ControlArray

Completing online form text entries in WebView without the need for identifying elements

What is the most efficient way to incorporate MongoDB into your codebase using ES6-style

Learn how to instruct ajax to fetch the designated information and retrieve corresponding data from the database based on the selected criteria

Here's a method for transferring data from one array to another: when there is existing data in the

Storing files offline in Firefox 3.5 with file:// protocol

Using Vue.js to connect v-html to a custom CSS stylesheet