I'd like to get many JSONs by Javascript or JQuery,
and pull of elements named j_name, j_value, and j_sts into sarr[i], rarr[i], and parr[i], respectively.
var sarr = new Object;
var rarr = new Object;
var parr = new Object;
//num_json is the number of JSONs
//jsonurl is a url of the JSON
for(var i = 1; i < num_json; i++){
$.ajaxSetup({async: false});
$.getJSON(jsonurl[i], function(data) {
sarr[i] = data.j_name;
rarr[i] = data.j_value;
parr[i] = data.j_sts;
});
$.ajaxSetup({async: true});
}
Without
$.ajaxSetup({async: false});
and
$.ajaxSetup({async: true});
, an asynchronous processing causes that sarr[i], rarr[i], and parr[i] are filled by current loaded JSON elements.
I have to stop asynchronous loading. However, this process is very slow to display the page.
I'd like to do like following to separate the object "data" storing a JSON, but it's clearly invalid.
var sarr = new Object;
var rarr = new Object;
var parr = new Object;
var data = new Object;
for(var i = 1; i < num_json; i++){
$.getJSON(jsonurl[i], function(data[i]) {
sarr[i] = data[i].j_name;
rarr[i] = data[i].j_value;
parr[i] = data[i].j_sts;
});
}
How can I load many JSONs asynchronously and store each specific elements?
Here is a way to do it
const urls = [];
const responses = urls.map( url => fetch(url).then(res => res.json()) );
Promise.all(responses)
.then( dataArr => {
return dataArr.reduce((res, data) => {
res.sarr[i] = data[i].j_name;
res.rarr[i] = data[i].j_value;
res.parr[i] = data[i].j_sts;
return res;
}, { sarr: [], rarr: [], parr: [] });
} )
.then(result => {
const { sarr, rarr, parr } = result;
});
This solutions uses the fetch API and Promises.
Basically what it does is : given an array of urls, make a request for each urls and retrieve the result as json, store the result in an array of Promises.
Given this array of promises, once all are settled, retrieve the result if and only if all requests were successful. If they are successful then store each values in the correct array and return it.
Related
I am trying to fetch the HTML script of two webpages using their URLs. This is my code:
const links = ["url1" : "https://.......", "url2" : "https://......"];
var responses = [];
for(const [key,value] of Object.entries(links)){
let resp = fetch('https://api.codetabs.com/v1/proxy?quest='+value)
responses.push(resp);
}
Promise.all(responses)
.then( htmlfiles =>{
htmlfiles.forEach(file=>{
file.text().then(function(data){
gethtmldata(data);
})
})
})
In my function gethtmldata, I am parsing this data in HTML format:
function gethtmldata(html_data){
var parser = new DOMParser();
var htmldoc = parser.parseFromString(html_data, "text/html");
console.log(htmldoc); //shows data of url2, then url1
}
To my utter surprise, the data of url2 gets printed first, then url1. Why?
It should show the html data of url1 then url2. How do I fix this?
The iterations of your for loop aren't paused when you do file.text().then(function(data){...}. Instead, your loop fires off multiple .text() calls which will complete sometime in the future, with no guaranteed order on which ones will complete first.
You should .push() a Promise that resolves to your .text() data instead when you create resp:
const links = {"url1" : "https://.......", "url2" : "https://......"};
const urls = Object.values(links);
const responses = [];
for(const value of urls){
const txtPromise = fetch('https://api.codetabs.com/v1/proxy?quest='+value).then(resp => resp.text());
responses.push(txtPromise);
}
Promise.all(responses)
.then(htmlData => {
htmlData.forEach(data=>{
gethtmldata(data);
});
});
You can refactor the above by using .map() and async/await like so:
async function fetchHTMLData(urls) {
const promises = urls.map(async url => {
const resp = await fetch('https://api.codetabs.com/v1/proxy?quest='+url);
return resp.text();
});
return Primise.all(promises);
};
async function processHTMLData() {
const links = {"url1" : "https://.......", "url2" : "https://......"};
const urls = Object.values(links);
const htmlArr = await fetchHTMLData(urls);
htmlArr.forEach(htmlStr => {
gethtmldata(htmlStr);
});
}
I have this script that takes data from a JSON with almost 100 data, then uses this data to bring the weather from an API and after that, inserts this data into an object (using a for for creating my 100 objects), I would like to add the objects that have a temperature > 99 in one array and the ones that have a temperature < 99 into another I have tried this way but doesn't seem to work, sorry if it's a super fool mistake that I can't see, thanks for your help!
This is my script:
async function calcWeather(){
const info = await fetch('../json/data.json')
.then(function(response) {
return response.json()
});
for (var i in info) {
const _idOficina = info[i][0].IdOficina
const _nombreOficina = info[i][0].NombreOficinaSN
const _zona = info[i][0].Zona
const _estado = info[i][0].NombreEstado
const lat = info[i][0].latjson
const long = info[i][0].lonjson
const base = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${long}&appid=${api_key}&units=metric&lang=sp`
fetch(base)
.then((responses) => {
return responses.json()
})
.then((data) => {
// console.log(data)
var myObject = {
Id_Oficina: _idOficina,
Latitud: data.coord.lat,
Longitud: data.coord.lon,
Ciudad: data.name,
Estado: _estado,
Zona: _zona,
Nombre_Oficina: _nombreOficina,
Temperatura: data.main.temp,
Descripcion: data.weather[0].description
};
// validation
if (myObject.Temperatura < 99){
var lstValid = [];
function pushValid(){
lstValid.push(myObject[i]);
}
pushValid();
console.log(pushValid())
}
});
}
};
Your array is local, so for every object you create new lstValid array with no previous data. The solution is to create the array before fetching the data or before the loop:
async function calcWeather(){
var lstValid = []; // HERE
const info = await fetch('../json/data.json')
.then(function(response) {
return response.json()
});
var lstValid = []; // OR HERE (ONLY ONE OF THEM)
for (...) {
...
}
You'll probably be best served by creating the array outside of that call since you're clearing it every run. Then simply add your object. Like Trincot's comment, i'm not sure what exactly you're indexing.
async function calcWeather(){
var lstValid = [];
....
if (myObject.Temperatura < 99){
lstValid[someindex] = myObject;
}
else{
lstNotValid[someOtherIndex] = myObject;
}
}
I'm using parse with javascript (vueJs) and i'm experiencing the following issue : when I destroy an object and then get all my data, the object is still in the result. However, if I look in my parse backend, the object has been deleted.
This is my code:
methods: {
getNotes: async function() {
console.log("\nGETTING ALL NOTES")
const Object = Parse.Object.extend("notes");
const query = new Parse.Query(Object);
query.equalTo("user", Parse.User.current());
query.descending("createdAt");
const results = await query.find();
for (let i = 0; i < results.length; i++) {
var temp = {}
const object = results[i];
temp.id = object.id
temp.note = object.get('note')
temp.date = object.get('createdAt')
this.notes.push(temp)
}
},
deleteNote: async function() {
const Object = Parse.Object.extend("notes");
const query = new Parse.Query(Object);
query.equalTo("objectId", this.selectedItem);
const results = await query.first();
if (results){
await results.destroy() // I wait for the object to be destroyed
await this.getNotes() //Then, I call (again) my function to get all notes ... but it still contains the deleted object !!
}else{
alert("There was a problem with the query")
}
}
}
Any ideas why this happens and how can I "check" when my parse database is up to date so that I can get the data again (without the removed object) ?
I need combine multple API calls on a final object, this because API have limits to be consumed, any have an idea how is possible combine multiple calls in same final object, next is an example of my code, I need all data in this.lista but is not working:
created(){
this.$http.get('/api/transactions?senderId=8642612272713533685S&limit=1&offset=000')
.then( function(res){
console.log(res.body.count);
let limit = Math.ceil(res.body.count/1000);
console.log(limit);
let m = {};
let off = 0;
for (var i = 0; i <= limit; i++) {
this.$http.get('/api/transactions?senderId=8642612272713533685S&limit=1000', {params:{offset: off}})
.then( function(data){
this.lista = { ...this.lista, ...data.body.transactions }
} )
off = off + 1000;
}
}
);
}
any help will be appreciated
Using Promise.all is most likely what you are looking for. I will write just enough code for you to understand where to go.
// Populate your array array with URLs you want to get
let urls = ["url1", "url2", "...and so on"];
// Make into web request promises
let httpReqPromises = urls.map( url => this.$http.get(url) )
// Wait for all of them to resolve
Promise.all(httpReqPromises).then(allResponses => {
// Put them all together
this.lista = allResponses.reduce((a, b) => ({...a, ...b}, {})
})
The only work I leave up to you is how you populate the url variable.
I am building a vue app that will search YouTube channels based on which options are selected.
When the option is TRUE, I push that string into an array which holds the URLs of the axios.get() requests.
I am looping through that array and running axios.get() and returning the value. I am getting a response under Promise{} with and object inside [[PromiseValue]].
At the end I am combining the responses into a vue data element(catAndDogResults) but I am getting an undefined in the end.
Is there a better way to do what I am trying to do?
data () {
return {
catVideos: true,
dogVideos: true,
catResults: [],
dogResults: [],
catAndDogResults: []
}
},
methods:
search: function() {
var that = this
var cats = 'https://www.googleapis.com/youtube/v3/search?part=snippet&q=cats'
var dogs = 'https://www.googleapis.com/youtube/v3/search?part=snippet&q=dogs'
var urls = []
if (this.catVideos == true) {
urls.push(cats)
}
if (this.dogVideos == true) {
urls.push(dogs)
}
function getVideos() {
for (var i = 0; i < urls.length; i++) {
console.log(axios.get(urls[i])) // returns under [[PromiseValue]]:object
return axios.get(urls[i])
}
}
axios.all([
getVideos()
])
.then(axios.spread(function (catRes, dogRes) {
that.catResults = catRes.data.items
that.dogResults = dogRes.data.items
that.catAndDogResults = that.catResults.concat(that.dogResults)
}))
}
EDITS
Fixed spelling mistakes
Try changing your getVideos() method to return the array after the for loop:
function getVideos() {
var requests = [];
for (var i = 0; i < urls.length; i++) {
requests.push(axios.get(urls[i]));
}
return requests;
}
And then, call it like that:
axios.all(getVideos())
.then(function (catRes, dogRes) { ... })
The answer provided by #tiagodws should fix the issue. I just wanted to rewrite the getVideos function, you could write it using ES6 syntax like the following:
var getVideos = () => urls.map(url => axios.get(url))