Guide to transforming JSON data into a different structure

Question

Guide to transforming JSON data into a different structure

My API is currently providing data in this format:

[
    {
        "lattitude": 52.57812538272844,
        "longitude": -1.7111388218750108,
    },
    {
        "lattitude": 53.043884,
        "longitude": -2.923782,
    }
]

I need to transform the data so that latitude becomes 'lat' and longitude becomes 'lng' like below:

[{
            lat: 52.57812538272844,
            lng: -1.7111388218750108,
        },
        {
            lat: 52.3602160,
            lng: 4.8891680,
}]

There are some missing fields which I will address later. Is there a way to achieve this without altering the API? I am using Angular-nativescript with a .net backend.

json angular typescript nativescript nativescript-angular

Answer 1

Answer №1

Is the information staying the same for you? Or is it something that can be observed?

If the data remains static, you can utilize the map function on arrays. This function converts an array into a new array.

const details = [
    {
        "latitude": 52.57812538272844,
        "longitude": -1.7111388218750108,
    },
    {
        "latitude": 53.043884,
        "longitude": -2.923782,
    }
];

const newData = details.map((point: any) => ({lat: point.latitude, lng: point.longitude }));

If the data is observable, just give me a heads up and I'll provide assistance in that area too.

Answer 2

Is the information staying the same for you? Or is it something that can be observed?

If the data remains static, you can utilize the map function on arrays. This function converts an array into a new array.

const details = [
    {
        "latitude": 52.57812538272844,
        "longitude": -1.7111388218750108,
    },
    {
        "latitude": 53.043884,
        "longitude": -2.923782,
    }
];

const newData = details.map((point: any) => ({lat: point.latitude, lng: point.longitude }));

If the data is observable, just give me a heads up and I'll provide assistance in that area too.

Answer 3

Answer №2

data = data.map(entry => ({ latitude: entry.lat, longitude: entry.lng }));

or

function updateProperty(object, oldPropertyName, newPropertyName) {
  object[newPropertyName] = object[oldPropertyName];
  delete object[oldPropertyName];
}

data.forEach(entry => {
  updateProperty(entry, "lat", "latitude");
  updateProperty(entry, "lng", "longitude");
});

Answer 4

data = data.map(entry => ({ latitude: entry.lat, longitude: entry.lng }));

or

function updateProperty(object, oldPropertyName, newPropertyName) {
  object[newPropertyName] = object[oldPropertyName];
  delete object[oldPropertyName];
}

data.forEach(entry => {
  updateProperty(entry, "lat", "latitude");
  updateProperty(entry, "lng", "longitude");
});

Answer 5

Answer №3

After experimenting with Nativescript + Angular, I discovered a new approach that successfully resolved the errors encountered in previous methods.

Below is the code snippet I implemented:

// Retrieve data from the API
getBusinesses() {
    let baseUrl = environment.apiUrl + 'business/locations';
    this.http.get(baseUrl).subscribe(response => {
        // Process the response data using createData function
        this.createData(response);
    }, error => {
        console.log(error);
    });
}

// Map and manipulate the data
createData(data) {
    var newData = data.map(item => ({
            lat: item.latitude,
            lng: item.longitude,
            title: item.address,
            subtitle: item.description,
    }));
    console.log(newData);
}

The updated output now looks like this:

JS: [{
JS:   "lat": 52.57812538272844,
JS:   "lng": -1.7111388218750108,
JS:   "title": "Non deserunt labore sunt ex laboris et adipisicing ullamco officia minim.",
JS:   "subtitle": "test"
JS: }, {
JS:   "lat": 53.043884,
JS:   "lng": -2.923782,
JS:   "title": "Non deserunt labore sunt ex laboris et adipisicing ullamco officia minim.",
JS:   "subtitle": "test"
JS: }]

Answer 6

After experimenting with Nativescript + Angular, I discovered a new approach that successfully resolved the errors encountered in previous methods.

Below is the code snippet I implemented:

// Retrieve data from the API
getBusinesses() {
    let baseUrl = environment.apiUrl + 'business/locations';
    this.http.get(baseUrl).subscribe(response => {
        // Process the response data using createData function
        this.createData(response);
    }, error => {
        console.log(error);
    });
}

// Map and manipulate the data
createData(data) {
    var newData = data.map(item => ({
            lat: item.latitude,
            lng: item.longitude,
            title: item.address,
            subtitle: item.description,
    }));
    console.log(newData);
}

The updated output now looks like this:

JS: [{
JS:   "lat": 52.57812538272844,
JS:   "lng": -1.7111388218750108,
JS:   "title": "Non deserunt labore sunt ex laboris et adipisicing ullamco officia minim.",
JS:   "subtitle": "test"
JS: }, {
JS:   "lat": 53.043884,
JS:   "lng": -2.923782,
JS:   "title": "Non deserunt labore sunt ex laboris et adipisicing ullamco officia minim.",
JS:   "subtitle": "test"
JS: }]

Guide to transforming JSON data into a different structure

Answer №1

Answer №2

Answer №3

Similar questions

How to incorporate JSON into a d3.js calendar display?

MongoDB data not appearing when accessing the RESTful API

Working with nested arrays of objects in Jsoncpp

Angular fails to recognize a module that is clearly located in the node_modules directory

Encountering a permission issue while trying to execute npm install -g @angular/cli command

When using Loopj to perform a Put or Post request with basic authentication, the response may sometimes be null

Encountering an issue with importing typeDefs in Apollo Server (Typescript) from an external file

Encountering problems with parsing a lengthy JSON file

Error caused by Gson Overflow

A guide to configuring VSCode to recognize the DefinitelyTyped global variable (grecaptcha) within a Vuejs 3 TypeScript project

Tips for creating Junit tests for a CDK environment

In PHP, upload a .dat file so that it can be saved as a JSON file

Using ASHX to Return JSON in ASP.NET

Is there a method to incorporate lists of varying types in a single v-for loop without causing any issues with type validations?

Typescript may fall short in ensuring type safety for a basic reducer

Encountering difficulties with implementing reactive forms in an Ionic Angular 7 project as the app.module.ts file appears to be missing

When the buffer is sent through the socket in NodeJS, the console responds by stating that it is not recognized as a buffer

The versatile payment solutions offered by PayPal, including Adaptive Payments and Chained Payments, can be seamlessly

What is the best way to transform this JSON data into an array of key-value pairs in JavaScript?

UI not reflecting updated form validation after changes made