What is the best way to append multiple JSON objects to a single array within a loop?

Question

What is the best way to append multiple JSON objects to a single array within a loop?

My current task involves making external API calls that return JSON objects. Once all the calls are completed, I intend to write the collection of JSON objects to a file. However, I'm encountering an issue where the data is being written to the file in the incorrect format.

UPDATE: The findPrices() function is invoked within a loop.

priceSearch1Array = [];

function findPrices(res) {

  (api.get({
    origin: A,
    destination: B,
  }).then(function(response) {

    priceSearchVar = JSON.stringify(response.result.data);
    priceSearch1Array.push(priceSearchVar);

  }).catch(function(error) {
    console.log('error and continue' + error);
  }))

}

Once all API calls are made, the array containing the data is saved to a file.

fs.writeFileSync('api/data/destinations3.json', priceSearch1Array);

The current output looks like this:

[{flight:"data", segments: { price:"23.22"}}],
[{flight:"data", segments: { price:"78.45"}}],
[{flight:"data", segments: { price:"48.45"}}]

However, I require the data to be written in the following format:

[ 
  {flight:"data", segments: { price:"23.22"}},
  {flight:"data", segments: { price:"78.45"}},
  {flight:"data", segments: { price:"48.45"}} 
]

I need the JSON objects to be presented as a list and then added to the file rather than having each object stored as an individual array. Is there a way to achieve this?

javascript arrays json loops

Answer 1

Answer №1

    function fetchAndStorePrices(result) {

      (api.get({
        origin: startingPoint,
        destination: finalDestination,
      }).then(function(response) {
        let prices = []

        try {
          // retrieve and convert the data into JSON format
          prices = fs.readFileSync('api/data/destinations3.json', 'utf8')
          prices = JSON.parse(prices)
          prices = Array.isArray(prices) ? prices : [prices]
        } catch(err) {}

        const responseData = response.result.data
        const combinedPricesArray = JSON.stringify([ ...prices, responseData ])

        fs.writeFileSync('api/data/destinations3.json', combinedPricesArray);

      }).catch(function(error) {
        console.log('encountered error but continuing...' + error);
      }))

    }

Answer 2

    function fetchAndStorePrices(result) {

      (api.get({
        origin: startingPoint,
        destination: finalDestination,
      }).then(function(response) {
        let prices = []

        try {
          // retrieve and convert the data into JSON format
          prices = fs.readFileSync('api/data/destinations3.json', 'utf8')
          prices = JSON.parse(prices)
          prices = Array.isArray(prices) ? prices : [prices]
        } catch(err) {}

        const responseData = response.result.data
        const combinedPricesArray = JSON.stringify([ ...prices, responseData ])

        fs.writeFileSync('api/data/destinations3.json', combinedPricesArray);

      }).catch(function(error) {
        console.log('encountered error but continuing...' + error);
      }))

    }

Answer 3

Answer №2

It seems that the complexity of the code structure might be causing some confusion when trying to troubleshoot the issue. I have reorganized the code for this example, although it may not be necessary to resolve the problem you are facing

There are a couple of issues that could be contributing to the problem:

Firstly, we are dealing with an array of arrays of objects instead of just an array of objects. This can be easily rectified by flattening the array as demonstrated in the function below.

Secondly, writing the raw object to a file can cause problems. Based on my understanding and some testing, fs will write the data as a string, resulting in simplistic conversion where the objects appear as [Object object]. To avoid this, we can use JSON.stringify to get a more appropriate conversion. The example provided simulates the fs and api calls, offering a basic idea.

I have also modified the code to utilize map and Promise.all instead of array push from a loop. This approach may be easier to comprehend; if it is unclear, please leave a comment and I will elaborate further.

const api = {
  get: data => new Promise(res => {
    setTimeout(() => res([data]), 1000)
  })
}

const fs = {
  writeFileSync: (location, data) => {
    console.log(
      `writing data ${data} to ${location}`
    );
    console.log('=====================');
  }
}

const data = [
  {A: 'test', B: 'another test'},
  {A: 'test2', B: 'another test2'},
];

const makeApiCallFromDataItem = dataItem => api.get({
  origin: dataItem.A,
  destination: dataItem.B,
});

const callApiForAllDataItems = data => Promise
  .all(data.map(makeApiCallFromDataItem))

const flatten = dataIn => dataIn.reduce((prev, curr) => [
  ...prev,
  ...curr
])

callApiForAllDataItems(data)
  .then(data => {
    fs.writeFileSync('api/data/destinations3.json', data)
  })
  
callApiForAllDataItems(data)
  .then(data => {
    fs.writeFileSync('api/data/destinations3.json', JSON.stringify(data))
  })
  
callApiForAllDataItems(data)
  .then(data => {
    const flatData = flatten(data);
    fs.writeFileSync('api/data/destinations3.json', JSON.stringify(flatData))
  })

Answer 4

It seems that the complexity of the code structure might be causing some confusion when trying to troubleshoot the issue. I have reorganized the code for this example, although it may not be necessary to resolve the problem you are facing

There are a couple of issues that could be contributing to the problem:

Firstly, we are dealing with an array of arrays of objects instead of just an array of objects. This can be easily rectified by flattening the array as demonstrated in the function below.

Secondly, writing the raw object to a file can cause problems. Based on my understanding and some testing, fs will write the data as a string, resulting in simplistic conversion where the objects appear as [Object object]. To avoid this, we can use JSON.stringify to get a more appropriate conversion. The example provided simulates the fs and api calls, offering a basic idea.

I have also modified the code to utilize map and Promise.all instead of array push from a loop. This approach may be easier to comprehend; if it is unclear, please leave a comment and I will elaborate further.

const api = {
  get: data => new Promise(res => {
    setTimeout(() => res([data]), 1000)
  })
}

const fs = {
  writeFileSync: (location, data) => {
    console.log(
      `writing data ${data} to ${location}`
    );
    console.log('=====================');
  }
}

const data = [
  {A: 'test', B: 'another test'},
  {A: 'test2', B: 'another test2'},
];

const makeApiCallFromDataItem = dataItem => api.get({
  origin: dataItem.A,
  destination: dataItem.B,
});

const callApiForAllDataItems = data => Promise
  .all(data.map(makeApiCallFromDataItem))

const flatten = dataIn => dataIn.reduce((prev, curr) => [
  ...prev,
  ...curr
])

callApiForAllDataItems(data)
  .then(data => {
    fs.writeFileSync('api/data/destinations3.json', data)
  })
  
callApiForAllDataItems(data)
  .then(data => {
    fs.writeFileSync('api/data/destinations3.json', JSON.stringify(data))
  })
  
callApiForAllDataItems(data)
  .then(data => {
    const flatData = flatten(data);
    fs.writeFileSync('api/data/destinations3.json', JSON.stringify(flatData))
  })

Answer 5

Answer №3

Consider replacing the line

priceSearchVar = JSON.stringify(response.result.data);

with simply

priceSearchVar =response.result.data

and switch

priceSearch1Array.push(priceSearchVar)

to

priceSearch1Array.push(JSON.stringify(...priceSearchVar))

Alternatively, you could condense it into a single line like this:

priceSearch1Array.push(JSON.stringify(...response.result.data))

Answer 6

Consider replacing the line

priceSearchVar = JSON.stringify(response.result.data);

with simply

priceSearchVar =response.result.data

and switch

priceSearch1Array.push(priceSearchVar)

to

priceSearch1Array.push(JSON.stringify(...priceSearchVar))

Alternatively, you could condense it into a single line like this:

priceSearch1Array.push(JSON.stringify(...response.result.data))

What is the best way to append multiple JSON objects to a single array within a loop?

Answer №1

Answer №2

Answer №3

Similar questions

Navigating Links with Python Selenium Loop

Ways to implement debounce in handling onChange events for input fields in React

Designing a split navigation bar in Django using unique styling for each section (HTML, CSS, and Javascript)

Is designing custom HTML for currency better done through a filter or directive?

Encountering an Error while Setting Up NextJS on Vercel

I am unable to retrieve dynamic data from the database

A step-by-step guide on fetching multiple iframe contents simultaneously with Selenium in Java

Guide for filtering MongoDB results in 15-minute intervals based on timestamp input

After npm installation and running the dev command, an error is displayed in the console, despite the project functioning properly on a different

Node.js accepts JSON data sent via XMLHttpRequest

display PHP JSON information using jQuery AJAX

How to create a popover in Rails 4 using Coffeescript and Bootstrap?

Verify if the data in the Express request is an array

Finding an element with Protractor by executing JS script

Restore radio input functionality with a transparent method

Enhancing AngularJs Kendo Grid Detail Template: Dynamically updating content based on selected row in the detail template

Tips for handling a nested array of elements that have been deserialized from a JSON string

Issue with changing the opacity of a Javascript button style is not functioning correctly

What is the process for generating a matrix with negative index positions?

"Attempting to access a variable defined in one pipe results in it being undefined in a