Updating the value in an array of objects simultaneously using JavaScript asynchronously

Question

Updating the value in an array of objects simultaneously using JavaScript asynchronously

I've encountered a problem that has been raised before, and despite trying various solutions such as using .map or (function(post){ async })(value), I'm still unable to move forward...

Here's the scenario: I have an array of objects along with a for loop:

var postsData = [{thumbnail: www.website.com/image.jpg}, {thumbnail: www.website.com/image.jpg}, {thumbnail... etc}];

for (let i = 0; i < 3; i++) {
  let thumbnail = postsData[i].thumbnail;
  Cloudinary.uploader.upload(thumbnail, function(result){
    // Feeling lost here
    // The result is returning as an object, and my goal is to update each thumbnail in
    // the postsData array to be result.public_id
  }, {transformation:[{}]});
} // Loop through all items in the array

// Figure out what to do next with the "updated" postsData array

An illustrative example would greatly aid in grasping the concept, especially since dealing with altering values requires handling asynchronous functions.

javascript object asynchronous cloudinary

Answer 1

Answer №1

Modify the "thumbnail" attribute of an object in an array to be equal to result.public_id. Implement a function that requires the current object from the postsData array as a parameter, update the "thumbnail" attribute using the upload function with the help of the Function.prototype.bind() method.

var length = postsData.length;
var count = 0;

function processData(response, element) {
  element["thumbnail"] = response_public.id;
  if (++count === length) finish(postsData);
}

function finish(array) {
  console.log(array, postsData);
}

for (let element of postsData) {
  Cloudinary.uploader.upload(
    thumbnail
    , processData.bind(null, element)
    , {transformation:[{}]}
  );
}

Check out the plnkr example here

Answer 2

Modify the "thumbnail" attribute of an object in an array to be equal to result.public_id. Implement a function that requires the current object from the postsData array as a parameter, update the "thumbnail" attribute using the upload function with the help of the Function.prototype.bind() method.

var length = postsData.length;
var count = 0;

function processData(response, element) {
  element["thumbnail"] = response_public.id;
  if (++count === length) finish(postsData);
}

function finish(array) {
  console.log(array, postsData);
}

for (let element of postsData) {
  Cloudinary.uploader.upload(
    thumbnail
    , processData.bind(null, element)
    , {transformation:[{}]}
  );
}

Check out the plnkr example here

Answer 3

Answer №2

To my understanding, you seem to be attempting to iterate through an array and perform asynchronous functions on each element. My suggestion would be to utilize Promise.js (refer to enter link description here). Here is a rough draft of how the code could potentially appear:

// initialize an array to hold promises
const PromiseArr = [];
postsData.map(d => {
  PromiseArr.push(
    // execute async actions and add them to the array
    new Promise((resolve, reject) => {
       Cloudinary.uploader.upload(thumbnail,(result) => {
         // return the result
         resolve(result);
       });
    })
  );
})
// execute all async actions and save the results in the result array
const result = PromiseArr.all();

Answer 4

To my understanding, you seem to be attempting to iterate through an array and perform asynchronous functions on each element. My suggestion would be to utilize Promise.js (refer to enter link description here). Here is a rough draft of how the code could potentially appear:

// initialize an array to hold promises
const PromiseArr = [];
postsData.map(d => {
  PromiseArr.push(
    // execute async actions and add them to the array
    new Promise((resolve, reject) => {
       Cloudinary.uploader.upload(thumbnail,(result) => {
         // return the result
         resolve(result);
       });
    })
  );
})
// execute all async actions and save the results in the result array
const result = PromiseArr.all();

Updating the value in an array of objects simultaneously using JavaScript asynchronously

Answer №1

Answer №2

Similar questions

React - assigning a value to an input using JavaScript does not fire the 'onChange' event

Encountering path import errors when developing a sample webpack site within a TypeScript library

Tips for correctly sending headers with SWR requests?

listening for new messages on discord using a loop in discord.js

Sending an array and an object simultaneously through a single ajax request

Is it possible to use the same HTML select/dropdown menu for multiple rows in a table?

Tips for highlighting a button within a details list using React and Office Fabric

Sending a properly formatted string on Postman

Exploring the contrast of utilizing the `new Date()` function compared to Firestore's `new

Using Javascript to extract information from the div element

Updating the label on a Highcharts speedometer gauge

Access a specific JSON value using AngularJS

On what occasion is a DOM element considered "prepared"?

Attempting to allocate arrays to an entity and then allocate it to a div

Ways to obtain a list of properties for an object

Transform data from API arrays into a remapped object with updated keys and structure

Creating with NodeJS

There seems to be a problem with the Bootstrap Container and Container Fluid

Accessing the identical file concurrently through ajax 12 times

Tips for adapting this code to be compatible with react-router v6