Collect in an object the responses received from 3 URLs via fetch

Question

Collect in an object the responses received from 3 URLs via fetch

Navigation

#1 by (1 votes)

1

Good I am trying to compile in an array the objects that I get from the calls fetch () at 3 url.

let log = console.log;
let datafile1 = fetch('http://s3.amazonaws.com/logtrust-static/test/test/data1.json');
let datafile2 = fetch('http://s3.amazonaws.com/logtrust-static/test/test/data2.json');
let datafile3 = fetch('http://s3.amazonaws.com/logtrust-static/test/test/data3.json');

Then I receive the promises of each call and normalize the information I get

   let objeto= {};
        let objetoComb = [];

        let patternDate = /\d{4}\-(0?[1-9]|1[012])\-(0?[1-9]|[12][0-9]|3[01])*/;
        let categoriePattern = /(CAT)\s\d/;

        datafile1.then (res => res.json())
                 .then(res => res.forEach(re =>{
                     objeto.fecha = re.d;
                     objeto.categoria =re.cat.toUpperCase();
                     //objeto.valor = re.value;
                     objetoComb.push(objeto);

        }));
            objetoComb.push(objeto);

            datafile2.then (res => res.json())
                 .then(res => res.forEach(re =>{
                     objeto.fecha = Date.parse(re.myDate);
                     objeto.categoria =re.categ;
                     objeto.valor = re.val;
                     //log(objeto); 

                     return objetoComb.push(objeto);
        }));

            datafile3.then(res => res.json())
                 .then(res => res.forEach(re =>{
                     //patternDate.test(re.raw);
                     objeto.fecha = Date.parse(re.raw.match(patternDate)[0]);
                     objeto.categoria =re.raw.match(categoriePattern)[0].toString();
                     objeto.valor = re.val;
                     //log(objeto);

                     return objetoComb.push(objeto);
        }));

            log(objetoComb);

But in log only the last element of the last call appears picked up.

My idea was to carry out the necessary transformations of the information and to group all the objects in the same array as I said before

javascript promesas fetch

asked by Alfonso 19.09.2018 в 17:07

source

1 answer

Decimals when editing record with modal Show checbox already marked with jquery

score 1 · Answer 1

You may have problems with that code because the main process does not wait for the calls to be executed, and the moment you run the console.log, you may get any value or you may not get any. For example, if the urls containing the json files take a minute, you will not see anything in the console.

I recommend you to consider reading more about the Promises in javascript

For the example you have given, you must use the Promise.all function to be able to wait for all the functions to finish running. See Promise.all

Here is an example:

let log = console.log;
let objects = [];
let datafile1 = fetch('http://s3.amazonaws.com/logtrust-static/test/test/data1.json').then(result=>{return result.json();}).then(result=>{objects.push(result)});
let datafile2 = fetch('http://s3.amazonaws.com/logtrust-static/test/test/data2.json').then(result=>{return result.json();}).then(result=>{objects.push(result)});
let datafile3 = fetch('http://s3.amazonaws.com/logtrust-static/test/test/data3.json').then(result=>{return result.json();}).then(result=>{objects.push(result)});

Promise.all([datafile1, datafile2, datafile3]).then(values => { 
  console.log(objects.length);
  console.log(objects);
});