I have a single page application using vue js. Now I have to get data from 3 different source URL and then need to map in an object to use it on the application.

Or is it better to get it from ONE URL after mapping it on the backend?

$.get(furl, function(data) {
  this.items1 = data;
});

$.get(furl, function(data) {
  this.items2 = data;
});

$.get(furl, function(data) {
  this.items3 = data;
});
// if I want to merge it here. I am not getting items1, items2, items3 here.

<script src=".1.1/jquery.min.js"></script>

I have a single page application using vue js. Now I have to get data from 3 different source URL and then need to map in an object to use it on the application.

Or is it better to get it from ONE URL after mapping it on the backend?

$.get(furl, function(data) {
  this.items1 = data;
});

$.get(furl, function(data) {
  this.items2 = data;
});

$.get(furl, function(data) {
  this.items3 = data;
});
// if I want to merge it here. I am not getting items1, items2, items3 here.

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

• javascript
• jquery
• ecmascript-6
• vuejs2

Share Improve this question Follow edited Sep 28, 2017 at 18:47 TheOdd 26522 silver badges1717 bronze badges asked Sep 28, 2017 at 18:37 ParkarParkar 3,04633 gold badges1717 silver badges2424 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

Use Promises:

Promise.all([
  new Promise(function(resolve) {
    $.get( furl, function( data ) {
      resolve(data);
    });
  }),

  new Promise(function(resolve) {
    $.get( furl, function( data ) {
      resolve(data);
    });
  }),

  new Promise(function(resolve) {
    $.get( furl, function( data ) {
      resolve(data);
   });
  })
]).then(function(results) {
  // The items will be available here as results[0], results[1], results[2], etc.
});

Written more efficiently and elegantly:

function promisifiedGet(url) {
  return new Promise(function(resolve) {
    $.get(url, resolve);
  });
}

Promise.all([
  promisifiedGet(furl1),
  promisifiedGet(furl2),
  promisifiedGet(furl3)
]).then(function(results) {
  console.log(results);
});

It looks like you are using jQuery for the ajax calls? In this case, I would remend using the when() to which will monitor the deffered objects that e back from the ajax queries and wait for them all to plete.

var a1 = $.get( furl, function( data ) {
            this.items1 = data;
   });


var a2 = $.get( furl, function( data ) {
            this.items2 = data;
   });


 var a3 = $.get( furl, function( data ) {
            this.items3 = data;
   });


$.when(a1, a2, a3, function(data1, data2, data3) {
   // here is where you merge them into your object and continue the rest of your code
   var o = {};
   o.items1 = data1;
   o.items2 = data2;
   o.items3 - data3;
});

You are using this inside a function, which in tern might be Either the global object or undefined if there is a use strict directive. Have you tried creating a variable out of the callback functions and in each callback, add the data to that array?

Like so:

let results = {};
$.get( furl, function( data ) {
        results.items1 = data;
 });


$.get( furl, function( data ) {
        results.items2 = data;
 });


 $.get( furl, function( data ) {
        results.items3 = data;
 });