ForEach inside API does not work properly - javascript

I am using angualr 4.
i have an array.
Here is my array;
this.bookings = [
{
'id':'dsjdsfhkdsjhfjkds01'
},
{
'id':'dsjdsfhkdsjhfjkds01'
}
]
I need retrieve data from database based on id.
Here is my script.
let scope = this;
scope.bookings.forEach(function(BookingItem){
var bId = BookingItem.id;
console.log("BId",bId);
scope.Bservice.getbooking(scope.at,bId).subscribe(booking => {
var responseVal = booking;
})
})
I need like forEach Take on firstvalue then get retrive data from database.After going to second value of booking then get data from database.
But i consoled value of bId.
ForEach taken on id values one by one After retreive data from database.
How can i fix this pblm.
Kindly advice me,
Thanks.

I am not understading you code at full but you have to do like this
You have to loop throught bookings array and than in argument of foreach you need vriable name not name of you class ,
Another thing is if you go in loop, you last returned value from ajax request will override vlaue of your variable , so better to store response in array thats why below code use array to store you response for each id.
let responseFromServer = new Array<any>();
this.bookings.forEach((bookingItem) => {
var bId=bookingItem.id;
console.log("BId",bId);
scope.Bservice.getbooking(scope.at,bId).subscribe(booking=>{
let response = new ResponseFromServer();
responseFromServer.Add(booking);
});
});

Since the api call response takes some time, you should wait for the response untill it is recieved.
You can use Observable forkJoin which works like a promise and processes all requests in loop and returns response.
import {Observable} from 'rxjs/Rx';
let observables = new Array();
this.bookings.forEach(function(booking){
observables.push(this.Bservice.getbooking(this.at,booking.id));
})
Observable.forkJoin(observables).subscribe(
res => console.log(res),
error => console.log('Error: ', error)
);
Here is a documentation for forkJoin

Related

retrieving data from database according to query conditions

"_id":{"$id":"61b5eb36029b48135465e766"},
"name":"push-ups","link":"https://google.com",
"image":"https://google.com",
"gender":["0","1","2"],
"goal":["lw","gw","sf"],
"age":60,
"excersietype":"chest",
"__v":0
this is how my data is stored in database
and I want to fetch data according to 3 condition
I got 3 queries from front gender goal and age and according to that I have to retrieve data
const gender = req.query.gender;
const age = req.query.age;
const goal = req.query.goal
const level = req.query.level
if (level==='fb'){
const getdata = new Forbeg.find({gender:{$in:gender}},{age:{$lte:age}},{goal:{$in:goal}});
console.log(getdata)
}
Is this a good way to find the data because I am getting error
UnhandledPromiseRejectionWarning: MongooseError: `Model.find()` cannot run without a model as `this`. Make sure you are not calling `new Model.find()`
I am getting above error while fetching
The error is explicit : Make sure you are not calling 'new Model.find()'. Use const getdata = Forbeg.find(...).
However, you will immediately run into the next problem, as Mongoose models return thenables (Promise-like). console.log(getdata) will log Promise<pending>. You need to resolve your database call, either by doing
Forbeg.find(...).then( getdata => console.log(getData));
or (much more better!):
const getdata = await Forbeg.find(...);
console.log(getdata)
Even better, add .lean() to get simple JSON data instead of an array of Mongoose objects (faster), and .exec() to get a true Promise instead of a thenable :
const getdata = await Forbeg.find(...).lean().exec();
console.log(getdata)
Remove new operator
const getData = Forbeg.find({gender:{$in:gender}},{age:{$lte:age}},{goal:{$in:goal}});

How to connect loop data to pdfgeneratorapi with wix corvid?

I'm generating PDF by using https://pdfgeneratorapi.com/.
Now I can show data one by one using this code.Can any one give me suggestion how can show all data with loop or any other way?
This below photos showing my template from pdfgenerator .
This is the code I'm using to generate PDF
let communicationWay1=[
{0:"dim"},
{1:"kal"}
];
let cstomerExpence1=[
{0:"dim"},
{1:"kal"}
];
let title="test";
let names="test";
let phone="test";
let email="test";
let maritalStatus="test";
let city="test";
let other="test";
const result = await wixData.query(collection)
.eq('main_user_email', $w('#mainE').text)
.find()
.then( (results) => {
if (results.totalCount>0) {
count=1;
// title=results.items[1].title;
names=results.items[0].names;
email=results.items[0].emial;
phone=results.items[0].phone;
maritalStatus=results.items[0].maritalStatus;
city=results.items[0].city;
other=results.items[0].cousterExpenses_other;
title=results.items[0].title;
communicationWay=results.items[0].communicationWay;
cstomerExpence=results.items[0].cstomerExpence;
}
if (results.totalCount>1) {
names1=results.items[1].names;
email1=results.items[1].emial;
phone1=results.items[1].phone;
maritalStatus1=results.items[1].maritalStatus;
city1=results.items[1].city;
other1=results.items[1].cousterExpenses_other;
title1=results.items[1].title;
communicationWay1=results.items[1].communicationWay;
cstomerExpence1=results.items[1].cstomerExpence;
}
} )
.catch( (err) => {
console.log(err);
} );
// Add your code for this event here:
const pdfUrl = await getPdfUrl
({title,names,email,phone,city,maritalStatus,other,communicationWay,cstomerExpence,title1,
names1,email1,phone1,city1,maritalStatus1,other1,communicationWay1,cstomerExpence1
});
if (count===0) { $w("#text21").show();}
else{ $w("#downloadButton").link=wixLocation.to(pdfUrl);}
BELOW CODE IS BACKEND CODE/JSW CODE.
Also I want to open pdf in new tab. I know "_blank" method can be used to open a new tab.But I'm not sure how to add it with the url
import PDFGeneratorAPI from 'pdf-generator-api'
const apiKey = 'MYKEY';
const apiSecret = 'MYAPISECRET';
const baseUrl = 'https://us1.pdfgeneratorapi.com/api/v3/';
const workspace = "HELLO#gmail.com";
const templateID = "MYTEMPLATEID";
let Client = new PDFGeneratorAPI(apiKey, apiSecret)
Client.setBaseUrl(baseUrl)
Client.setWorkspace(workspace)
export async function getPdfUrl(data) {
const {response} = await Client.output(templateID, data, undefined, undefined, {output: 'url'})
return response
}
Just put it in a while loop with a boolean condition.
You can create a variable, for example allShowed, and set its value to False. After that, create another variable, for example numberOfDataToShow, and set it as the number of elements you want to display. Then create a counter, countShowed, initialized with 0 as its value.
Now create a while loop: while allShowed value is False, you loop (and add data).
Everytime a piece of your data is showed, you increment the value of countShowed (and set it to go on adding/showing data). When countShowed will have the exact same value of numberOfDataToShow, set allShowed to True. The loop will interrupt and all your data will be showed.
You would need to use the Container or Table component in PDF Generator API to iterate over a list of items. As #JustCallMeA said you need to send an array of items. PDF Generator API now has an official Wix Velo (previously Corvid) tutorial with a demo page: https://support.pdfgeneratorapi.com/en/article/how-to-integrate-with-wix-velo-13s8135

How to synchronise my code execution in angular

I'm performing multiple task and each task is dependent on previous task execution. So in my example what I want is after getting all the Id, i should get their respective blob value and then finish the execution by storing it in a variable. I'm very new to javascript and angular, please help me out. Here's what I'm trying
//this method will get the response from the rest api
async getIDFromAssets(){
this.blobDataArray=[];
this.service.getAssetsData().subscribe(async (res: JSON) => {
//after getting the response I'm filtering through it to get sepcific Id using this.getFileId() method
this.getFileId(res).then((data)=>{
console.log("blob "+data)
})
})
}
//below method will get one Id at a time and will call another method to get it's blob value
async getFileId(res){
this.fileId = [];
Object.keys(res).forEach(keys => {
if (keys == 'emb') {
let responseValue = res[keys];
Object.keys(responseValue).forEach(async (keys1) => {
if (keys1 === 'file') {
let responseArray = responseValue[keys1];
for (let file of responseArray) {
let temp: string = file.metadata.contentType;
if (temp.startsWith('image')) {
//Here I'm getting id value 'file._id' and using that I'm calling another method 'getBlobData()' to get its blob value
let data=await this.getBlobData(file._id);
this.blobDataArray.push(data);
}
}
return this.blobDataArray
}
});
}
});
}
// method to get the blob value
async getBlobData(fileId){
this.articleDetailService.getBlobDataFromAssets(fileId).subscribe(async (res)=>{
let imageObj={
'id':fileId,
'blob':res
}
return imageObj;
})
}
You need to use RxJs to avoid the nested subscription to chain your calls, possible methods to use are mergeMap and filter
Please take a look at this answer here.

Make Multiple Post Requests In Axios

What I have been trying to do is hit an endpoint for my blog posts and then with this data remove extra layout markup that came in from Wordpress. I am using Axios to make the request and then transform response option in order to modify the data to remove the extra markup from the "post_body" object inside my response. This works on a single blog post but when I try to do this all my blog blog posts it return an object of 20 or so blog posts. What I want to do is loop through the objects transform my data and then make a post request back to another API to publish my blog post. What I can't figure out if this will be possible once my promise is resolved. Would I be able to create another for loop within the .then and find my "post_body" object and make the post request. Not sure if I am thinking about this in the right way or not. Any help is much appreciated.
var fieldName = "et_pb";
var regExp = new RegExp("\\[\/?(" + fieldName + ".*?)\\]", "g");
function getBlogPosts() {
return axios.get(allPosts, {
transformResponse: axios.defaults.transformResponse.concat(function(data, headers) {
// use data I passed into the function and the objects from the API
// pass in data into the function using forEach this will return an array
data.objects.forEach(function(i) {
// use the returned array on Objects.key to find the name of the array
Object.keys(i).forEach(function(k) {
// if the key equals execute code
// console.log(k);
if (k === "post_body") {
// fire Regex
data[k] = i[k].replace(regExp, '');
// console.log(data[k])
}
})
})
return data;
})
})
}
axios.all([getBlogPosts()])
.then(axios.spread(function(blogResponse) {
console.log(blogResponse.data);
}));
#James you are correct . you can chain multiple requests as below or you can go for asyn and await options .
axios.get(...) // for allPosts
.then((response) => {
return axios.get(...); // using response.data
})
.then((response) => {
console.log('Response', response);
});

Http request in forEach function. Angular2

Having problem with using forEach function with http requests.
I have a _watchlistElements variable, which holds following data:
[{"xid":"DP_049908","name":"t10"},{"xid":"DP_928829","name":"t13"},{"xid":"DP_588690","name":"t14"},{"xid":"DP_891890","name":"t16"},{"xid":"DP_693259","name":"t17"}]
Now, Im making a function which will download data from server for each of these xid elements:
private download() {
this._watchlistElements.forEach(v =>
this.http.get('http://localhost:8080/getValue/' + v.xid)
.subscribe(res => this._values = res.json()));
}
It has to download data as object for every v.xid value and store it inside the _values variable.
private _values: Array<WatchlistComponent> = [];
But somehow, angular returns an error with v.xid element. It doesn't see that variable. But it's kinda strange, because when I do it just in console, I mean: store that json inside a variable and use forEach function on this v.xid elements, everything works well.
ERROR in [default] C:\Users\src\app\appBody\watchlist\watchl
ist.component.ts:51:115
Property 'xid' does not exist on type 'WatchlistComponent'.
The xid exists... but inside the _watchlistElements which downloads the data asynchonously...
I'm not 100% sure this method is right, but if you have any ideas how to fix it, please tell me.
What happens when you print out the _values array?
The error above is a type error. What does the WatchlistComponent interface look like? Does it include an xid property?
You can get around the type error by overriding the type like...
private download() {
this._watchlistElements.forEach((v as any) =>
this.http.get('http://localhost:8080/getValue/' + v.xid)
.subscribe(res => this._values = res.json()));
}
As far as helping you structure your code better. If you want to combine the result of many Observables, I would use something like forkJoin.
private download():void {
//create an array of Observables
let el$ = _watchlistElements.map(el => {
return this.http.get('http://localhost:8080/getValue/' + el.xid)
.map(res: Response => <any>res.json());
});
//subscribe to all, and store the data, el$ is an array of Observables
Observable.forkJoin(el$).subscribe( data => {
this._values = data; //data will be structured as [res[0], res[1], ...]
});
}
HERE is a Plunker with the above method working. https://plnkr.co/edit/woXUIDa0gc55WJPOZMKh?p=preview
Related: angular2 rxjs observable forkjoin

Categories