Transform the API response from a string into an array containing multiple objects

Question

Transform the API response from a string into an array containing multiple objects

How can I transform a string API response into an array of objects?

When making a GET request, the result is returned as a single long string:

const state = {
    strict: true,
    airports: []
};

const getters = {
    allAirports: (state) => state.airports,
};

const actions = {
    getAirports({ commit }) {
        axios.get('https://raw.githubusercontent.com/jpatokal/openflights/master/data/airports.dat')
            .then(response => {
                commit('SET_AIRPORTS', response.data)
            })
    }
};

const mutations = {
    SET_AIRPORTS(state, airports) {
        state.airports = airports
    }
};

The response looks like this:

1,"Goroka Airport","Goroka","Papua New Guinea","GKA","AYGA",-6.081689834590001,145.391998291,5282,10,"U","Pacific/Port_Moresby","airport","OurAirports" ...

Instead, I want to split this string into separate objects and append them to the airports array like this:

airports: [
  {
   id: 1,
   name: 'Goroka Airport',
   city: 'Goroka',
   country: 'Papua New Guinea',
   iata: 'GKA',
   icao: 'AYGA',
   longitude: -6.081689834590001,
   latitude: 145.391998291
  },
  {
   etc...
  }
]

Can you provide guidance on how to achieve this transformation?

javascript vue.js split

Answer 1

Answer №1

Give this code a shot, it's been crafted in a clear and concise manner

var WholeData = [1,"Goroka Airport","Goroka","Papua New Guinea","GKA","AYGA",-6.081689834590001,145.391998291,5282,10,"U","Pacific/Port_Moresby","airport","OurAirports",2,"Madang Airport","Madang","Papua New Guinea","MAG","AYMD",-5.20707988739,145.789001465,20,10,"U","Pacific/Port_Moresby","airport","OurAirports"];
var fullarray = WholeData;

var i = 0;
var airportArray = []; 

fullarray.forEach(function callbackFn(value, index) {

  if (typeof airportArray[i] == 'undefined') {
    airportArray[i] = [];
  }
    
  airportArray[i].push(value);
  
  if((index+1)%14==0 && index!=0)
  {
    i++;
  }

});


var j = 0;
var finalArr = [];
airportArray.forEach(function callbackFn(value, index) {
    finalArr.push({
        id: value[0],
        name: value[1],
        city: value[2],
        country: value[3],
        iata: value[4],
        icao: value[5],
        longitude: value[6],
        latitude: value[7],
    });

});


console.log(finalArr);

Answer 2

Give this code a shot, it's been crafted in a clear and concise manner

var WholeData = [1,"Goroka Airport","Goroka","Papua New Guinea","GKA","AYGA",-6.081689834590001,145.391998291,5282,10,"U","Pacific/Port_Moresby","airport","OurAirports",2,"Madang Airport","Madang","Papua New Guinea","MAG","AYMD",-5.20707988739,145.789001465,20,10,"U","Pacific/Port_Moresby","airport","OurAirports"];
var fullarray = WholeData;

var i = 0;
var airportArray = []; 

fullarray.forEach(function callbackFn(value, index) {

  if (typeof airportArray[i] == 'undefined') {
    airportArray[i] = [];
  }
    
  airportArray[i].push(value);
  
  if((index+1)%14==0 && index!=0)
  {
    i++;
  }

});


var j = 0;
var finalArr = [];
airportArray.forEach(function callbackFn(value, index) {
    finalArr.push({
        id: value[0],
        name: value[1],
        city: value[2],
        country: value[3],
        iata: value[4],
        icao: value[5],
        longitude: value[6],
        latitude: value[7],
    });

});


console.log(finalArr);

Answer 3

Answer №2

To extract the individual data lines, utilize String.prototype.split() with \n as the delimiter on the text response fetched from the specified URL.
Employ Array.prototype.map() to transform each line:

a. Separate the comma-separated values from the line using String.prototype.split() with , as the separator.

b. Remove unnecessary quotes from the values by employing String.prototype.replace() with a regular expression that matches leading/trailing quotes and replacing them with an empty string.

c. Create an object with the specified fields.

const actions = {
  getAirports({ commit }) {
    axios
      .get('https://raw.githubusercontent.com/jpatokal/openflights/master/data/airports.dat')
      .then(response => {
        // 1️.
        const lines = response.data.split('\n');
        // 2️.
        const airports = lines.map(line => {
          const fields = line.split(',') // 2a.
                            .map(x => x.replace(/(^"|"$)/g, '')); // 2b.

          // 2c.
          return {
            id: fields[0],
            name: fields[1],
            city: fields[2],
            country: fields[3],
            iata: fields[4],
            icao: fields[5],
            longitude: fields[6],
            latitude: fields[7],
          };
        });

        commit('SET_AIRPORTS', airports);
      })
  }
};

view demo

Answer 4

To extract the individual data lines, utilize String.prototype.split() with \n as the delimiter on the text response fetched from the specified URL.
Employ Array.prototype.map() to transform each line:

a. Separate the comma-separated values from the line using String.prototype.split() with , as the separator.

b. Remove unnecessary quotes from the values by employing String.prototype.replace() with a regular expression that matches leading/trailing quotes and replacing them with an empty string.

c. Create an object with the specified fields.

const actions = {
  getAirports({ commit }) {
    axios
      .get('https://raw.githubusercontent.com/jpatokal/openflights/master/data/airports.dat')
      .then(response => {
        // 1️.
        const lines = response.data.split('\n');
        // 2️.
        const airports = lines.map(line => {
          const fields = line.split(',') // 2a.
                            .map(x => x.replace(/(^"|"$)/g, '')); // 2b.

          // 2c.
          return {
            id: fields[0],
            name: fields[1],
            city: fields[2],
            country: fields[3],
            iata: fields[4],
            icao: fields[5],
            longitude: fields[6],
            latitude: fields[7],
          };
        });

        commit('SET_AIRPORTS', airports);
      })
  }
};

view demo

Answer 5

Answer №3

For a precise measurement of the object's length, consider implementing the following code snippet:

const blueprint = {
   id: '',
   name: '',
   city: '',   
   country: '',
   iata: '',
   icao: '',
   longitude: '',
   latitude: ''
}
const data = [1,"Goroka Airport","Goroka","Papua New Guinea","GKA","AYGA",-6.081689834590001,145.391998291]
let divided = []  //* final result
let chunkSize = 8 //* specified chunk size



for (let i = 0; i< data.length; i+=chunkSize) {
  let object = {}
  let temporary = data.slice(i, i+chunkSize)
  
 
  Object.keys(blueprint).map((key,index)=>{
     object[key] = temporary[index]
  })
  divided = [...divided,object]
}


console.log(divided)

const prototype = {
   id: '',
   name: '',
   city: '',   
   country: '',
   iata: '',
   icao: '',
   longitude: '',
   latitude: ''
}
const arr = [1,"Goroka Airport","Goroka","Papua New Guinea","GKA","AYGA",-6.081689834590001,145.391998291]
let chunked = []  //* final  output
let chunk = 8 //* chunk length



for (let i = 0; i< arr.length; i+=chunk) {
  let obj = {}
  let temp = arr.slice(i, i+chunk)
  
 
  Object.keys(prototype).map((key,i)=>{
     obj[key] = temp[i]
  })
  chunked = [...chunked,obj]
}


console.log(chunked)

Answer 6

For a precise measurement of the object's length, consider implementing the following code snippet:

const blueprint = {
   id: '',
   name: '',
   city: '',   
   country: '',
   iata: '',
   icao: '',
   longitude: '',
   latitude: ''
}
const data = [1,"Goroka Airport","Goroka","Papua New Guinea","GKA","AYGA",-6.081689834590001,145.391998291]
let divided = []  //* final result
let chunkSize = 8 //* specified chunk size



for (let i = 0; i< data.length; i+=chunkSize) {
  let object = {}
  let temporary = data.slice(i, i+chunkSize)
  
 
  Object.keys(blueprint).map((key,index)=>{
     object[key] = temporary[index]
  })
  divided = [...divided,object]
}


console.log(divided)

const prototype = {
   id: '',
   name: '',
   city: '',   
   country: '',
   iata: '',
   icao: '',
   longitude: '',
   latitude: ''
}
const arr = [1,"Goroka Airport","Goroka","Papua New Guinea","GKA","AYGA",-6.081689834590001,145.391998291]
let chunked = []  //* final  output
let chunk = 8 //* chunk length



for (let i = 0; i< arr.length; i+=chunk) {
  let obj = {}
  let temp = arr.slice(i, i+chunk)
  
 
  Object.keys(prototype).map((key,i)=>{
     obj[key] = temp[i]
  })
  chunked = [...chunked,obj]
}


console.log(chunked)

Transform the API response from a string into an array containing multiple objects

Answer №1

Answer №2

Answer №3

Similar questions

Completing the final touches on my jQuery typing enhancement feature

Utilize jQuery and HTML simplistically to display or conceal divs throughout a webpage

js The correct value is not being set to the div's style.top

Exploring Angular 8 Route Paths

Facing some unexpected issues with integrating Django and AngularJS, unclear on the cause

Tips for changing array items into an object using JavaScript

Currently trapped within the confines of a Next.js 13 application directory, grappling with the implementation of a

Incorporate a Vue.js computed property into the data retrieved from a server

Protecting your Single Page Application with a CSRF token

A comparison of Vue's import paths: exploring the variations

Spin a Material UI LinearProgress

Prevent incorrect data input by users - Enhancing JavaScript IP address validation

The automated test locator in Angular using Protractor is failing to function

The URL for the dynamic import in Workbox is loading incorrectly

"We are experiencing issues with the app.get function and it is

emptyQueue in jQuery

Utilize the <a> element as a button to submit the data form

Identify the activation of the "Inspect Element" feature

Exploring the integration of datatables.net-vue3 with Vue.js 3 in Visual Studio: A step-by-step guide

Express middleware for serving static files using express.static() is not properly handling routing and is throwing an error stating that next()