wait for async function with $.each before continuing

Question

I made this fiddle to help debug the following code...

If you go to the fiddle and keep hitting "run" - you will notice that the results are different every time (they should be the same). I am trying to accomplish 2 thing

1. how can i make sure that the year key/val is on items[] every time — it is not consistent now.

2. I do not want to alter titles during transformData() . As it is now the array is being modified... my attempt was transformData(titles.slice(0), items => { but it is still being altered.

    const titles = [ { title: 'avatar' }, { title: 'jurassic' }, { title: 'black panther' } ]; transformData(titles.slice(0), items => { const problem = items.length !== titles.length; const debugg ={ problem: problem, counts: { items: items.length, // echos 2 titles: titles.length // echos 3 }, items: items, // echos an object with 3 arrays inspector shows length:3 titles: titles // echos an object with 3 arrays inspector shows length:3 }; console.log('debugg', debugg) $('pre').text(JSON.stringify(debugg, null, 2)) }); function transformData(configs, next) { const self = this; const items = []; const last = configs.length; $.each(configs, function(i, config) { items.push(config); $.ajax({ url: 'https://www.omdbapi.com/?apikey=f4e09aec&&t=' + items[i].title, type: 'GET', crossDomain: true, dataType: 'jsonp', success: function(results) { if (results.Response != 'False') { console.log(results); items[i].year = results.Year; if (i+1 === last) { next(items); } } } }); }); } 

Answer 1

I have updated your fiddle . The reason your titles was getting updated, because titles array and array passed as arguments had reference to same objects. Instead of pushing same object, i'm creating new objects,

items.push({...config})

 const titles = [ { title: 'avatar' }, { title: 'jurassic' }, { title: 'black panther' } ]; transformData(titles.slice(0), items => { const problem = items.length !== titles.length; const debugg ={ problem: problem, counts: { items: items.length, // echos 2 titles: titles.length // echos 3 }, items: items, // echos an object with 3 arrays inspector shows length:3 titles: titles // echos an object with 3 arrays inspector shows length:3 }; console.log('debugg', debugg) $('pre').text(JSON.stringify(debugg, null, 2)) }); function transformData(configs, next) { const self = this; const items = []; const last = configs.length; const p = [] $.each(configs, function(i, config){ items.push({...config}) p.push($.ajax({ url: 'https://www.omdbapi.com/?apikey=f4e09aec&&t=' + items[i].title, type: 'GET', crossDomain: true, dataType: 'jsonp' })) }) Promise.all(p).then((values)=>{ for(var i =0;i<values.length;i++){ items[i].year = values[i].Year } next(items) }) } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <pre></pre>