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

Clearing the filename in a file type input field using React

Leveraging react-markdown alongside Material-UI's table component

The size of the array within the object does not align

"I have successfully removed the URL from index.html. However, I am now wondering how I can include them in app

Losing scope of "this" when accessing an Angular2 app through the window

Use the filter method to organize arrays into subarrays based on their length, filtering out those with a length greater than or

Error code 1 occurs when attempting to execute the "npm run start" command

Resolve the issue with automatically generating SCSS type definitions (style.d.ts) for Preact within a TypeScript webpack setup

An alternative solution for supporting Edge Chromium is utilizing synchronous AJAX requests within the beforeunload event

Troubleshooting problem: AJAX autocomplete URL returning XML

Troubleshoot: Unable to utilize mapActions with Vuex modules

Convert your AS3 code to JavaScript with our specialized compilers

Use $.ajax to display the menu by capturing an array of elements {0}

Having trouble extracting data from a particular cell within an HTML table using jQuery

I must arrange each item in a column vertically, regardless of whether they could align horizontally

Tips for effectively utilizing Vuex to manage items within a Vuetify data table

What is the best way to transfer a user-generated PNG file to my backend server?

Transfer PDF file to user's web browser through XMLHttpRequest, utilizing up-to-date HTML5 techniques, all while maintaining the integrity of the document's encoding

What issues could potentially arise from utilizing the MIME type application/json?

Store the information from an AJAX post request in a div element into the browser