Converting JSON to an array in Ionic 3

Question

Converting JSON to an array in Ionic 3

I'm struggling to convert a JSON response from a Laravel API into an array in my Ionic 3 app.

Below is the JSON structure:

https://i.sstatic.net/izRAV.png


Object {
    id_oiseau: 1, 
    nom_commun: "Hirondelle", 
    lieu_signalement: "Foret", 
    date_signalement: "2017-05-16", 
    condition_signalement: "Aile coincee sous branche",
    date_reception:"2017-05-16",
    date_renvoi:"2017-05-02",
    and more...
}

I have created a provider to fetch this JSON data for my Ionic app:


export class BirdService {

    returnedData;
    headers: any;
    options: any;

    constructor(public http: Http) {
        this.headers = new Headers();
        this.headers.append('Content-Type', 'application/json');
    }

    getRemoteData(): Observable<any> {
        return this.http.get('http://extranet.local/api/v1/bird/1', this.headers).map(res => res.json());
    }
}

And here is the function I'm using to convert the JSON:


export class HistoryPage {

    constructor(public navCtrl: NavController, public serviceOne: BirdService) {}

    ionViewDidLoad() {

        this.serviceOne.getRemoteData().subscribe(
            data => {
                let list: History[] = data;
                console.log(data);
        });
    }
}

However, I am facing issues as the JSON file remains in its original JSON format. I tried using parseJSON with jQuery but encountered an error stating "Cannot read property 'parseJSON' of undefined". I also attempted to use Angular's fromJson method, but Ionic couldn't recognize the name "angular". Any suggestions on how to resolve this issue would be greatly appreciated!

jquery angularjs typescript laravel-5 ionic3

Answer 1

Answer №1

Utilize the JSON.parse() function to parse the data.

No additional library imports are necessary for this parsing task.

Your code implementation should resemble the following:

ionViewDidLoad() {

        this.serviceOne.getRemoteData().subscribe(
            data => {
                var Results = JSON.parse(data);
                console.log(Results);
        });
    }

Answer 2

Utilize the JSON.parse() function to parse the data.

No additional library imports are necessary for this parsing task.

Your code implementation should resemble the following:

ionViewDidLoad() {

        this.serviceOne.getRemoteData().subscribe(
            data => {
                var Results = JSON.parse(data);
                console.log(Results);
        });
    }

Answer 3

Answer №2

There is no need to manually parse the json within the subscribe method. Rather, you are already handling it within the map function. Using map(res => res.json())


             let list: History[] = data;

The issue lies in the fact that your data is an object and not an array.

To resolve this, simply use:


       var history = data;

You can access the content of the object like this:

 
  console.log(history.nom_commun);

Answer 4

There is no need to manually parse the json within the subscribe method. Rather, you are already handling it within the map function. Using map(res => res.json())


             let list: History[] = data;

The issue lies in the fact that your data is an object and not an array.

To resolve this, simply use:


       var history = data;

You can access the content of the object like this:

 
  console.log(history.nom_commun);

Answer 5

Answer №3

Thank you once more, but I have discovered a different solution,

I implemented the following code snippet:

History.push(data);

By adding the data to an object within an array, my system in conjunction with Angular seems to be functioning smoothly with this method.

Answer 6

Thank you once more, but I have discovered a different solution,

I implemented the following code snippet:

History.push(data);

By adding the data to an object within an array, my system in conjunction with Angular seems to be functioning smoothly with this method.

Converting JSON to an array in Ionic 3

Answer №1

Answer №2

Answer №3

Similar questions

The global function is not recognized within the Angular controller script

Has anyone created a modified version of jRails that is compatible with Rails 2.3 and jQuery 1.4?

Convert this text into HTML code: "Textarea to

Transfer all HTML variables using AJAX with jQuery

Issues with launching NPM Start (Having trouble with Node on Mac OS X Yosemite)

Flexible type definition including omission and [key:string]: unknown

Neglecting to validate types in the personalized response format within Express

Attempting to incorporate the jquery-mousewheel plugin into the jquery cycle2 library

Validation of forms can be achieved through the use of System.ComponentModel.DataAnnotations along with

Convert a regular element into a DebugElement within an Angular framework

Is there a way to modify the title of a website upon entering the webpage and then updating it when moving to a new page?

Compiling and rendering HTML code from a file with AngularJS

Finding all parent IDs from a given child ID within a nested JSON structure that contains children can be achieved by recursively

The calendar on the Datetimepicker is not appearing in the proper position

Enhance jQuery event handling by adding a new event handler to an existing click event

Tips on how to customize an Ajax modal appearance

I am looking for an image search API that supports JSONP so that users can easily search for images on my website

Global AngularJS service

Utilize jQuery to showcase images on your webpage

Notify programmers about the potential risks associated with utilizing certain third-party components