Reorganizing responses in JavaScript using the Fetch API

Question

Reorganizing responses in JavaScript using the Fetch API

Recently, I have been working with the fetch API in JavaScript. I encountered an issue where I have an array of months and need to retrieve values from a database. However, when logging the results in the console, the array of months gets rearranged. How can I prevent this reordering of arrays?

async function getMonthAccomplishment(m, s) {
    this.m = m;
    this.s = s;

    const param_point = 'filecase/monthaccomplishment/' + this.m + '/' + this.s;

    this.endpoint = url() + param_point;

    return await fetch(this.endpoint, {credentials: 'include'})
        .then((resolve) => {
            if(resolve.ok) {
                return resolve.text();
            }
        }, rejected => { console.error(rejected); })
        .then((response) => {
            return response;
        }).catch((error) => {
            console.error(error);
        });
}

let PostMonthAccomplishment = function() {
    this.m = '';
    this.s = '';
    this.t = '';
};

PostMonthAccomplishment.prototype.set = function(m, s, t) {
    this.m = m;
    this.s = s;
    this.t = t;

    if(typeof this.m === 'object' && typeof this.s === 'string') {
        this.m.forEach((month) => {
            getMonthAccomplishment(month, this.s)
                .then((data) => {
                    console.log(month + ': ' + this.s + ' -> ' + data);
                });
        });
    } else {
        console.error('invalid typeof!');
    }
};

const months = ['january', 'february', 'march', 'april', 'may', 'june', 'july', 'august', 'september', 'october', 'november', 'december'];
const status = ['beginning+balance', 'case+receive', 'Decided/Report+&+Recom.+Submitted+from+Pending'];

let pma = new PostMonthAccomplishment();
pma.set(months, status[1], '');

Results may vary:

dar:27 january: case+receive -> 0
dar:27 april: case+receive -> 0
dar:27 may: case+receive -> 0
dar:27 march: case+receive -> 0
dar:27 june: case+receive -> 0
dar:27 february: case+receive -> 0
dar:27 july: case+receive -> 0
dar:27 august: case+receive -> 0
dar:27 september: case+receive -> 0
dar:27 october: case+receive -> 0
dar:27 november: case+receive -> 0
dar:27 december: case+receive -> 0

And at times:

dar:27 january: case+receive -> 0
dar:27 february: case+receive -> 0
dar:27 june: case+receive -> 0
dar:27 april: case+receive -> 0
dar:27 march: case+receive -> 0
dar:27 may: case+receive -> 0
dar:27 july: case+receive -> 0
dar:27 august: case+receive -> 0
dar:27 september: case+receive -> 0
dar:27 october: case+receive -> 0
dar:27 november: case+receive -> 0
dar:27 december: case+receive -> 0

javascript arrays ecmascript-6

Answer 1

Answer №1

To achieve sequential processing of tasks, you can easily use multiple lines with await statements to pass the output from one asynchronous call to another. This is a common practice when working with promises. Make sure to place your array data within an async function like the following example for handling parallel requests:

async function processArr(arr) {
  let pArray = []
  for(const item of arr) {
    let response = await fetch('https://jsonplaceholder.typicode.com/posts/'+ item)
    pArray.push(response.json())
  }
  const months = await Promise.all(pArray);
  console.log(months)
  return months
}

processArr([1, 2, 3])

p/s update for sequential processing:

async function processArr(arr) {
  let pArray = []
  for(const item of arr) {
    let response = await fetch('https://jsonplaceholder.typicode.com/posts/'+ item)
    let data = await response.json();
  }
}

processArr([1, 2, 3])

Answer 2

To achieve sequential processing of tasks, you can easily use multiple lines with await statements to pass the output from one asynchronous call to another. This is a common practice when working with promises. Make sure to place your array data within an async function like the following example for handling parallel requests:

async function processArr(arr) {
  let pArray = []
  for(const item of arr) {
    let response = await fetch('https://jsonplaceholder.typicode.com/posts/'+ item)
    pArray.push(response.json())
  }
  const months = await Promise.all(pArray);
  console.log(months)
  return months
}

processArr([1, 2, 3])

p/s update for sequential processing:

async function processArr(arr) {
  let pArray = []
  for(const item of arr) {
    let response = await fetch('https://jsonplaceholder.typicode.com/posts/'+ item)
    let data = await response.json();
  }
}

processArr([1, 2, 3])

Reorganizing responses in JavaScript using the Fetch API

Answer №1

Similar questions

To retrieve the value of an element in the Response tab of the Network tab in Google Chrome's developer tools, I am looking to use JavaScript, TypeScript, or Cypress

Display an alert in a React Native app using Native Base based on certain conditions

Discover the highest value within an array of objects, along with any numerical object attributes that have a value greater than zero

Transitioning from using .live() to utilizing the .on() method

Troubleshooting a JSON error encountered while utilizing the mongoimport tool

Enhancing interactivity: Implementing a ripple effect for Card clicks in Material UI

The effective method for transferring a PHP variable value between two PHP files using jQuery

RegEx in JavaScript to identify and match the innerHTML property of all elements

Customizing textfield error color in MUI5 React based on conditions

Differences between the `getLocationAbsUrl` and `getCurrentUrl

Copy files using grunt, in accordance with the ant pattern, while excluding any variable directories

Deleting a dynamically generated row from an array

To include the express module in another JavaScript file, simply require it at the top of the file using the following code: `

Troubleshooting Webpack: Dealing with the error "React is not defined" in Bundle.js

Efficiently loading an image in one go

SCSS - Hide div1 when div2 is hovered over

Storing Data with expressjs/session in NodeJS

What is the best way to troubleshoot a Node.js backend using node-inspector?

Implement a jQuery click event on a dynamically generated button in the code-behind

Generate an image on Canvas using a URL link