Update a nested array in AngularFire2 - arrays

I have the following model for a Firestore document:
{
name: "test",
isActive: true,
items: [
{
id: "123",
itemName: "testItem",
qty: 1
},
{
id: "555",
itemName: "anotherItem",
qty: 5
}]
}
Now that Firestore allows to work with nested arrays (via arrayRemove / arrayUnion), I am wondering whether this is possible also through AngularFire2.
Or the only way so far is to import Firebase and using it straight ahead?
Like:
this.firestore.collection(<collectionName>).doc(<docID>).update({
answers: firestore.FieldValue.arrayUnion(<AnswersObject>)
});
Moreover is such a model with nested array legit in FIrestore or should it rather be structured in a different way?

Unfortunately, AngularFire2 does NOT yet support this. You can verify this by checking out the source code.
Or, if you're lazy like me and don't feel like digging through trying to find it on GitHub... what I did to double check was to download the whole repo as a ZIP file, extract, and open folder in VS Code. Searching the whole folder for FieldValue or arrayUnion returns nothing - those words don't exist in the entirety of the source.
So for right now, you're correct about needing to stick with the default Firebase/Firestore package. And nested arrays are definitely a "legit" thing, but like everything else, when to use it depends on your situation - and I don't feel qualified or experienced enough to evaluate your situation and make a strong recommendation.

I struggled with this a while, it seems angular's documentation is always behind. I updated an item the array like this, the array is called accomodation and it is within the day object.
this.data.firestore.doc(`days/${accommodation.day}`)
.update({
accommodation: [
accommodation
]
});

Related

React frontend - Building an autocomplete input

I've been researching online and got a lot of resources on how to implement an autocomplete input field. However, all of them are examples of autocomplete for a list of words. I'm trying to build a autocomplete based on a list of objects. So the basic idea would be when users want to see a recommended list of the fields in an object when they type a dot. For example, I have an object below:
const myObj = {
field1: "value1",
field2: 10,
field3: {
nestedField1: "nestedValue1",
...
}
}
So in an input, I can do something like "myObj.", and it will have a list of suggested fields to let users choose.
Does anyone have any idea on how to implement this kind of autocomplete? Or if there is any source related to this kind of project, it would be much appreciated if you could share with me. Thanks in advance.
We used Material UI for something similar, take a look: https://mui.com/material-ui/react-autocomplete/, also if you required something very particular, you can implement yourself without any other library.
Best of luck

Sorting MongoDB data in GraphQL resolver (Meteor/React/Apollo)

I'm trying to sort some data returned by a query in GraphQl. I'm running a Meteor/React/Apollo/Graphql stack, and this line allows me to obtain all the data in my database in a resolver resolvers.js : return database.find({}) I would like to sort it server-side by the "name" field and according to the docs and everything else I've been able to find online so far, return database.find({}).sort({name:1}) should have cut it, but it's not actually returning anything and I can't seem to figure out why, nothing shows up in my console and no errors are being thrown, and hence I believe it's just null or empty.
In my Robo3T console I can run database.find({}).sort({name:1}) and I can see the data actually being sorted. According to the docs I thought it may have been due to the Node implementation, and so I tried sort([["name",1]]) but that did not work either, and I'm not quite sure how else to go about this.
If there is no way to do this - should I just rely on client-side sorting? It's not many entries, < 100, and I think I should just sort it in the database itself because I never need the unsorted data and it's likely not even going to change much.
I would like to ask this regardless though, even if just sorting it once in my database is enough for this specific situation, how would I otherwise go about sorting data in a resolver, because I would need to do this in other instances?
Thanks!
EDIT - This is what I have:
export default {
Query: {
test_query(obj, args, context) {
// Bottom line is output
console.log("test1");
console.log(Database.find({}).sort({name:1}));
// Bottom line is not output
console.log("test2");
return Database.find({});
},
}
EDIT2: My database is defined as Database = new Mongo.Collection("db_name")
I believe you are looking at the wrong documentation. If this is indeed meteor, then Database is presumably a meteor collection, not a raw mongo collection. The interface on meteor collections is slightly different. In your case, I think you want:
Database.find({}, {sort: {name: 1}}).fetch();
.find() returns a cursor:
http://mongodb.github.io/node-mongodb-native/3.6/api/Collection.html#find
This works for Meteor pubsub, but not for GraphQL/Apollo. Try .find().toArray():
http://mongodb.github.io/node-mongodb-native/3.6/api/Cursor.html#toArray

Returning a JSON array of translated content using i18n

Context: I am making a multi-language page using the react-i18next module of ReactJS.
Issue: I cannot access the arrayed JSON content.
The translated content being stored in separate JSON files for each language, non-array content works fine and gets correctly displayed and translated, however, I can't seem to use the arrayed content on my React components, let alone access its content through console.log().
Below is an example of my translationEN.json file:
{
"name": "Test",
"occupations":["occupation1",
"Part-time occupation2",
"Language enthusiast"]
}
I am being able to refer to the non-array name using i18n.t("name").
However, attempting to access my arrayed occupations using i18n.t("occupations") results in the following console.log:
key 'occupations (en)' returned an object instead of string.
Using JSON.stringify() doesn't solve the issue, neither does console.log(i18n.t("occupations"), { returnObjects: true }) as suggested on i18next's documentation
Thanks in advance!
Problem solved.
The array values can be accessed as such: i18n.t("occupations.0") for occupation 1, i18n.t("occupations.1") for Part-time occupation 2 and i18n.t("occupations.2") for Language enthusiast.
I just need to loop it out to make it look cleaner.

Cant use dynamic content of any?

I'm building a service parsing some json string to object. I did not get the full object so several of the properties withtin the object is null.
When using "Data operations" to parse the JSON from the example data null becomes type "any". Every other property with data is defined as types string, number and so on works.
But properties defined as 'any' is not usable in the following steps in my logic app.
Looks like there's a bug in our schema generator.
For input like
{
"foo": null
}
We should generate schema like
{
"foo": {}
}
Instead of
{
"foo": { "type": "any"}
}
We will be fixing this soon, in the meantime, remove "type": "any" should make the token show in in subsequent steps.
Try to use code view if you are developing in Visual studio. You will get used to expression building in json easier rather than using designer. Sooner designer will be getting better and better.

Google maps PlaceDetails in different language than English

i wanted to ask you if there is a way to get the google maps place details in a different language than English. I use AngularJs and i created a directive in which i perform the below steps:
User types in an autocomplete field
I get the results, i parse them and then I try to get the details like this:
service = new google.maps.places.PlacesService(theMap.map);
service.getDetails({
placeId: placeId,
key: googleMapsAPIKey,
language: 'el'
}, function(place) {
myLangAddressComponents = place.address_components;
});
The problem is that myLangAddressComponents information is still in English.
Any help would be appreciated.
Based on the documents regarding Optional Parameters: language,
The language code, indicating in which language the results should be returned, if possible. Note that some fields may not be available in the requested language. See the list of supported languages and their codes. Note that we often update supported languages so this list may not be exhaustive.
I think that there is no problem in your code, it is just not yet available in the requested language. I hope this clear some issues you've encountered. :)
Keep in your mind that you are passing the map instance in the PlacesService. As I saw from experimenting if the map is localized in el then the results would be also in el.

Resources