JavaScript Matching one array with another? - javascript

above i have the picture of my arrays, below code i have mapped 2 sets of array .Purpose of this function is to make '_polygons' empty array. i have a rest service which is 'this.siAsset.updateComponent(_id, _polygons)' that is designed to update each asset. only thing is, i cant seem to pass an array of data to the update component service i have, its designed to take one id and one object as a parameter (if there is a way around , please provide) as you can see by the picture, both _id and _polygons have arrays of id's an arrays of objects. Question is, how can i loop and match to call the rest to go through each id and object instead of calling by writing the code 9 times like this.siAsset.updateComponent(_id[0], _polygons[0]) ...this.siAsset.updateComponent(_id[9], _polygons[9])
deleteAllZones = () => {
let assetVal = this.asset.$$state.value
console.log('tenant', assetVal)
let _polygons = assetVal.map(function (a) {
a.polygon = []
return a
})
console.log('a',_polygons)
let _id = assetVal.map(function (a) {
let id = a.id
return id
})
console.log('id',_id)
let message = this.$filter('translate')('SI-MESSAGES.DELZONE-MSG');
let title = this.$filter('translate')('SUBHEADER.DELZONE-TITLE');
let button = this.$filter('translate')('BUTTON.DELETE');
this.siAlertDialog.confirm(message, title, button)
.then(() => {
this.siAsset.updateComponent(_id, _polygons).then(() => {
this.toastIt.simple(this.$filter('translate')('SI-MESSAGES.ZONE-DELETED'))
}, (err) => {
this.siAlertDialog.error();
}
)
})
}

Your code snippet doesn't work. I've made dummy entries. This should give you an idea. Basically, you need to loop over one array and use the index to find corresponding items in the second
// Mocking data here
let assetVal = [{
id: 1
},
{
id: 2
},
{
id: 3
}
]
let _polygons = assetVal.map(function(a) {
a.polygon = []
return a
})
//console.log('a', _polygons)
let _id = assetVal.map(function(a) {
let id = a.id
return id
})
//console.log('id', _id)
// Mocking done
let updateComponent = (id, polygon) => {
return new Promise((resolve, reject) => {
resolve({
id,
polygon
})
})
}
_id.forEach((id, i) => {
updateComponent(id, _polygons[i]).then(result => {
console.log(result)
})
})
Also, by looking at your code, it doesn't look like your updateComponent method needs id to be passed as a parameter as it is already present in the polygon as well. Maybe you want to refactor that.

Related

Process multiple request queries

I have an API that serves JSON data. Currently if you do api/weapons for example it gives you all the weapons available, api/weapons/weaponName gives information about that specific weapon. What I want to do is be able to api/weapons?type=sword&rarity=5 for example. I managed to pull of api/weapons?type=sword and api/weapons?rarity=5 on their own but not together.
Here's what I'm currently doing:
let filtered = [];
if (query.type) {
filtered = filtered.concat((await weapons).filter(w => formatName(w.weaponType) === formatName(query.type)));
}
if (query.rarity) {
filtered = filtered.concat((await weapons).filter(w => w.rarity == query.rarity));
}
if (!filtered.length) filtered = [await weapons]
res.status(HttpStatusCodes.ACCEPTED).send(filtered);
formatName is just a function that makes the string all lowercase and trims it and removes all spaces.
If we take api/weapons?type=sword&rarity=5
I think what's happening right now is:
It is getting all the weapons with the type "sword"
It is getting all the weapons with the rarity "5"
It is joining all the results together, so all the weapons with the type sword (regardless of rarity) and al the weapons with the rarity 5 (regardless of type).
I want it to filter weapons with ONLY that rarity AND ONLY that type. So only 5 rarity swords for example. What is the most beneficial way of handling this
I'd suggest retrieving "weapons" once and then running any filters on them without concatenating the results:
let filtered = [ ...(await weapons) ];
if (query.type) {
filtered = filtered.filter(w => w => formatName(w.weaponType) === formatName(query.type));
}
if (query.rarity) {
filtered = filtered.filter(w => w.rarity == query.rarity);
}
res.status(HttpStatusCodes.ACCEPTED).send(filtered);
Your current logic is testing whether one constraint OR another matches, what you actually need to do is to do an AND, which means you must perform the test in a single pass of filter.
I would slightly modify your code so that you compare all constraints that you're sending...you could further modify the logic below to accept a logical operator to test whether the rarity is >= or <= to a certain number for example.
const weapons = [{
type: 'sword',
name: 'swift blade of zek',
rarity: 5
},
{
type: 'mace',
name: 'hammer of kromzek kings',
rarity: 1
},
{
type: 'sword',
name: 'split blade of thunder',
rarity: 2
},
{
type: 'sword',
name: 'blade of carnage',
rarity: 5
},
]
const getWeapons = (query = {}) => {
let filtered = [];
let constraints = [];
// We could build this object dynamically but I just wanted
// to demonstrate it using your current approach
if (query.hasOwnProperty('type')) {
constraints.push({
name: 'type',
value: query.type
})
}
if (query.hasOwnProperty('rarity')) {
constraints.push({
name: 'rarity',
value: query.rarity
})
}
// Compare all of the conditions and only return weapons
// that match all of the conditions passed.
filtered = weapons.filter(w => {
let matches = 0
constraints.forEach(c => {
if (w[c.name] === c.value) {
matches += 1
}
})
// ensures we only return complete matches
return matches === constraints.length
});
return filtered
}
console.log(getWeapons({
type: 'sword',
rarity: 5
}))
Create an object which has the same property keys as the filters you want to use. Assign a function to each property where the evaluation for that specific filter is specified.
const filters = {
type: (weapon, type) => formatName(weapon.weaponType) === formatName(type),
rarity: (weapon, rarity) => weapon.rarity === rarity,
};
Then loop over the weapons with filter. Inside the filter loop, loop over the keys of the query variable with the every method. This method will return true or false based on if every evaluation is true or not.
In the every loop, use the keys of the query to select the filter from the filters list. Pass the weapon and the values of the query object to these filter functions and return result.
By doing this you can use one, two or no filters at all. And any new filters can be added in the filters object.
const filteredWeapons = weapons.filter((weapon) =>
Object.keys(query).every((filterKey) => {
if (!(filterKey in filters)) {
return false;
}
const filter = filters[filterKey]
const value = query[filterKey]
return filter(weapon, value);
})
);
res.status(HttpStatusCodes.ACCEPTED).send(filteredWeapons);

mach beginning javascript with Array

Good afternoon, I am trying to make a method that tells me the number of elements an Array has that starts with "RT:"
For this I have developed the following code:
public getRowsRTs(idProyecto){
this.twitterService.getTargets().subscribe((data) => {
this.Twitter = data;
});
let countRT = this.Twitter.filter( tweet => tweet.message.startsWith("RT:")).length;
return countRT;
}
}
Here, data returns all the Documents that Mongo extracts, and puts them in the Twitter Array that I have defined at the beginning of the component. Within this Array each element has different attributes, such as _id, message, date ... I want you to tell me how many of those documents, the message value, begins with RT: and to return it to me, this code , it does not give me any problem, but it does not give me absolutely nothing, I do not know if someone could help me.
If the array is filled with strings, this should work:
let regixForRTStart = /^RT:/;
startArray = ['RT:1', 'RT:2', 'Other', 'Stuff'],
count = startArray.filter(item => regixForRTStart.test(item))
// length
console.log(count.length);
use filter and startsWith methods.
const arr = [
{ message: "abc" },
{ message: "RT:" },
{ message: "RT: 2" },
{ message: "test" }
];
const count = arr.filter(({ message }) => message.startsWith("RT:")).length;
console.log(count);

In rxjs, how do I chain mapping through arrays of data received from different API's?

I'm calling an API and receiving an array of results, I'm checking for pagination and if more pages exist I call the next page, repeat until no more pages.
For each array of results, I call another endpoint and do the exact same thing: I receive an array of results, check for another page and call endpoint again. Wash, rinse repeat.
For instance:
I want to grab a list of countries that might be a paginated response, then for each country I want to grab a list of cities, which might also be paginated. And for each city I execute a set of transformations and then store in a database.
I already tried this, but got stuck:
const grabCountries = Observable.create(async (observer) => {
const url = 'http://api.com/countries'
let cursor = url
do {
const results = fetch(cursor)
// results = {
// data: [ 'Canada', 'France', 'Spain' ],
// next: '47asd8f76358df8f4058898fd8fab'
// }
results.data.forEach(country => { observer.next(country) })
cursor = results.next ? `${url}/${results.next}` : undefined
} while(cursor)
})
const getCities = {
next: (country) => {
const url = 'http://api.com/cities'
let cursor = url
do {
const results = fetch(cursor)
// results = {
// data: [
// 'Montreal', 'Toronto',
// 'Paris', 'Marseilles',
// 'Barcelona', 'Madrid'
// ],
// next: '89ghjg98nd8g8sdfg98gs9h868hfoig'
// }
results.data.forEach(city => {
`**** What do I do here?? ****`
})
cursor = results.next ? `${url}/${results.next}` : undefined
} while(cursor)
}
}
I tried a few approaches:
Making a subject (sometimes I'll need to do parallel processed base on the results of 'grabCountries'. For example I may want to store the countries in a DB in parallel with grabbing the Cities.)
const intermediateSubject = new Subject()
intermediateSubject.subscribe(storeCountriesInDatabase)
intermediateSubject.subscribe(getCities)
I also tried piping and mapping, but it seems like it's basically the same thing.
As I was writing this I thought of this solution and it seems to be working fine, I would just like to know if I'm making this too complicated. There might be cases where I need to make more that just a few API calls in a row. (Imagine, Countries => States => Cities => Bakeries => Reviews => Comments => Replies) So this weird mapping over another observer callback pattern might get nasty.
So this is what I have now basically:
// grabCountries stays the same as above, but the rest is as follows:
const grabCities = (country) =>
Observable.create(async (observer) => {
const url = `http://api.com/${country}/cities`
let cursor = url
do {
const results = fetch(cursor)
// results = {
// data: [
// 'Montreal', 'Toronto',
// 'Paris', 'Marseilles',
// 'Barcelona', 'Madrid'
// ],
// next: '89ghjg98nd8g8sdfg98gs9h868hfoig'
// }
results.data.forEach(city => {
observer.next(city)
})
cursor = results.next ? `${url}/${results.next}` : undefined
} while (cursor)
})
const multiCaster = new Subject()
grabCountries.subscribe(multiCaster)
multiCaster.pipe(map((country) => {
grabCities(country).pipe(map(saveCityToDB)).subscribe()
})).subscribe()
multiCaster.pipe(map(saveCountryToDB)).subscribe()
tl;dr - I call an API that receives a paginated set of results in an array and I need to map through each item and call another api that receives another paginated set of results, each set also in an array.
Is nesting one observable inside another and mapping through the results via 'callApiForCountries.pipe(map(forEachCountryCallApiForCities))' the best method or do you have any other recommendations?
Here's the code that should work with sequential crawling of next url.
You start with a {next:url} until res.next is not available.
of({next:http://api.com/cities}).pipe(
expand(res=>results.next ? `${url}/${results.next}` : undefined
takeWhile(res=>res.next!==undefined)
).subscribe()
OK, so I have spent a lot of brain power on this and have come up with two solutions that seem to be working.
const nestedFlow = () => {
fetchAccountIDs.pipe(map(accountIds => {
getAccountPostIDs(accountIds) // Has the do loop for paging inside
.pipe(
map(fetchPostDetails),
map(mapToDBFormat),
map(storeInDB)
).subscribe()
})).subscribe()
}
const expandedflow = () => {
fetchAccountIDs.subscribe((accountId) => {
// accountId { accountId: '345367geg55sy'}
getAccountPostIDs(accountId).pipe(
expand((results) => {
/*
results : {
postIDs: [
131424234,
247345345,
],
cursor: '374fg8v0ggfgt94',
}
*/
const { postIDs, cursor } = results
if (cursor) return getAccountPostIDs({...accountId, cursor})
return { postIDs, cursor }
}),
takeWhile(hasCursor, true), // recurs until cursor is undefined
concatMap(data => data.postIDs),
map(data => ({ post_id: data })),
map(fetchPostDetails),
map(mapToDBFormat),
map(storeInDB)
).subscribe()
})
}
Both seem to be working with similar performance. I read some where that leaving the data flow is a bad practice and you should pipe everything, but I don't know how to eliminate the first exit in the 'expandedFlow' because the 'expand' needs to call back an observable, but maybe it can be done.
Now I just have to solve the race condition issues from the time the 'complete' is called in getAccountPostIDs the the last record is stored in the DB. Currently in my test, the observer.complete is finishing before 3 of the upsert actions.
Any comments are appreciated and I hope this helps someone out in the future.
What you need is the expand operator. It behaves recursively so it fits the idea of having paginated results.

Angular RxJs - fill array in the second stream (nested stream)

I have in my Angular application a list of a specific model. Each item of this list has a propery xyzList. This xyzList property should be filled from a request which depends on the id of the first request. Here an example:
Model:
{
id: number;
name: string;
xyzList: any[]
}
Now I have two requests:
Request 1: Fills the model, but not the xyzList
this.myVar$ = this.myService.getElements<Model[]>();
Request 2: Should fill xyzList
this.myService.getXyzElements<XyzModel[]>(idOfTheModelOfTheFirstRequest);
At first I thought something like that:
this.myService.getElements<Model[]>()
.pipe(
mergeMap(items => items)
mergeMap(item => {
return this.myService.getXyzElements<XyzModel[]>(item.id)
.pipe(
map(xyzList => {
item.xyzList = xyzList
return item;
})
)
})
)
This does not work as I have flattened my list and I need an Observable<Array[]>, but I think is more or less clear what I want to achieve. I assume I can achieve this with forkJoin for instance, but I don't know how.Or is there a way to convert the flattened list back to list?
You need to use toArray(), because mergeMap/flatMap is used to flatten the array of data stream. It will return an Array instead of data steam.
this.myService.getElements<Model[]>()
.pipe(
mergeMap(items => items)
mergeMap(item => {
return this.myService.getXyzElements<XyzModel[]>(item.id)
.pipe(
map(xyzList => {
item.xyzList = xyzList
return item;
})
)
}),
toArray()
)
Well, I understand that you have a service function that return a list of "items". EachItem you need call another service function that return the data "xyzList".
So, each "item" must be a call, then, you create an array of "calls"
myService.getElements().pipe(
switchMap(result=>{
//We can not return the "list"
let calls:Observable[]=[]
//Before, the first calls was the own result
calls.push(of(result));
//Each result push the calls
result.forEach(e=>{
calls.push(myService.getXyzElements(e.id));
})
return forkJoin(calls).pipe(map(result=>{
//in result[0] we have the list of items
//In result[1] we have the Xyz of items[0]
//In result[2] we have the Xyz of items[1]
int i:number=0;
result[0].map(x=>{
i++;
return {
...x,
xyzList:result[i]
}
})
return result[0];
}))
})
).subscribe(res=>console.log(res));

Firestore - Deep Queries

I have a Firestore that contains a collection (Items) that contains subcollections (called "things"). When I get my Items collection I get all of the child documents but none of the child collections. I would like to do a deep retrieval, one object called Items that contains the sub-collections.
I understand this is not possible out of the box, but I am struggling to write the code myself to do this.
Can anyone help?
constructor(public afs: AngularFirestore) {
//this.items = this.afs.collection('Items').valueChanges();
this.itemsCollection = this.afs.collection('Items', ref => ref.orderBy('year', 'asc'));
this.items = this.itemsCollection.snapshotChanges().map(changes => {
return changes.map(a => {
const data = a.payload.doc.data() as Item;
data.id = a.payload.doc.id;
return data;
});
});
}
getItems() {
return this.items;
}
Yes, you can execute the code below to get what you want to. Basically this code gets for each item its things subcollection:
getItems(): Promise<any> {
return this.db.collection('items').get().then(
items => {
return this.getThingsForItems(items);
});
}
getThingsForItems(items): Promise<any> {
return Promise.all(items.docs.map(async (element) => {
var things = []
const response = await this.db.collection('items')
.doc(element.id).collection('things').get();
response.forEach(subcollectionItem => {
things.push(subcollectionItem.data());
});
return { Item: element.data(), Things: things }
}));
}
The getItems method will return a promisse that contains your items with its things subcollection.
Something like that:
Keep in mind that this query can become a slow-running query since it is making a get for each document of the items collection.
So you might should consider denormalize your database or transform the things subcolletion in an array of the items documents (in this case you should be aware that a document has a max size of 1MB, so do not consider this option if you are array can become too big).

Categories

Resources