I have implemented the Angular 2 ngui-auto-complete component by following this component. And related to this i found example. But the issue I'm facing is, on my auto-complete there multiple dependencies. So for that on selection I want id but I am not getting on selection id.
And one more facing issue is my source is in the form of an object with id as one of the fields. And by following the implementation example of the component, the id is displayed in parenthesis in the dropdown. Is there a way to not display the id in the dropdown?
Here is my HTML code for the auto-complete component:
<input class="text-uppercase form-control" ngui-auto-complete [(ngModel)]="shipper.cust_name" [source]="shipperNameSource.bind(this)" value-property-name=null value-formatter="cust_name" min-chars="1" (change)="updateShipperDetails()"/>
My component
shipperNameSource = (keyword: any): Observable<any[]> => {
let url: string =
'api/getCustomers?selected='+keyword
if (keyword) {
return this.http.get(url)
.map(res => {
let json = res.json();
this.customer.id = json.id;
return json;
})
} else {
return Observable.of([]);
}
}
This is what I get
There is nothing wrong with your data. It is showing undefined means your data exist but there is something wrong with your mapping with auto-complete. Trying to log api response and check in which node you are getting actual data and map accordingly.
Related
I have this collection in Firebase
I have tried to modify the value within the map notes of a specific subject, I could not do it and I have tried in several ways without success
I would really appreciate a little help.
I get the data in that way, but I can not update that data.
this.firestore.collection('school').doc('254')
.get().toPromise().then(doc => {
if (doc.exists) {
const student = doc.data().class.find(value => {
return value.name === 'john';
});
console.log('student', student);
/*
Here edit student.notes.math = newValue
*/
}
});
PD: I'm currently work with Angular 7.
I don't see that your code attempts to update the document that you found. Changing the data in memory doesn't change the contents of the document. You will have to write additional code to update the document with your changes to the class field.
See:
Firestore: How to update specific field of document?
The documentation
this.firestore
.collection('school')
.doc('254')
.update("class", NEW_FIELD_CONTENTS)
You will need to provide the entire contents of the updated class field. Firestore doesn't have any operations that let you update an array item at a specific index.
I am navigating into a view from another view and passing the itemdId as param value to vue router.
I want to be able to call firebase with that itemId so that I can filter the data and the filtered result/data is used in the UI. I am using vuefire.
What is happening is that vue starts rendering before the data is available in created() and I see error is the console saying view is referring to undefined property values.
Is there a way to render the view after the data is available?
I have tried the using beforeMount as well as created and beforeCreate approaches.
See code below:
<h1>{{projects[0].project_name}}</h1> //it says type error. cannot read property project_name of undefined. Sometimes on refresh it works but most times it does not.
Script code below:
let projectsRef = db.ref('projects');
export default {
name: 'ProjectDetailsOpenInvesting',
props: {
data: Object
},
firebase:{
projects: projectsRef
},
data(){
return {
projects:[],
.....
}
},
created(){
var that = this;
console.log(this.$route.params.itemid) //this works
this.projects = this.projects.filter(function(p){
return p.project_id == that.$route.params.itemid //this works as well
})
}
Firebase screenshot here
As you have mentioned, one approach is to fetch after navigation, i.e. fetch the data in the component's created hook.
To do that with vuefire you need to programatically bind the Realtime Database projectsRef Reference to the projects property in your Vue application, as follows:
created(){
console.log(this.$route.params.itemid)
const itemId = this.$route.params.itemid;
this.$rtdbBind('projects', projectsRef.orderByKey().equalTo(itemId)).then(projects => {
this.projects === projects;
});
}
As explained in the API doc:
$rtdbBind returns a Promise that is resolved once the data has been
retrieved and synced into the state.
Note that you need to install the rtdbPlugin plugin: https://vuefire.vuejs.org/api/vuefire.html#rtdbplugin
Also note that instead of filtering the desired project item in the front-end (with filter(function(p){return p.project_id == that.$route.params.itemid}))), we filter it in the back-end, at the level of the database (projectsRef.orderByKey().equalTo(itemId)) which is more efficient and which avoids transmitting the entire set of objects from the back-end to the front-end (and avoids paying for this downloaded volume, see https://firebase.google.com/pricing?authuser=0).
In my dashboard application I have the following data structure:
Project -> Dashboard -> etc. .So this means a project object inherits a list of dashboard objects. When the user logs in the project data get loaded and observed so that different components can access the project data. But now when I am trying to access a specific dashboard of a project in my subscription I am getting an undefined error. My subscription looks as follows:
ngOnInit(): void {
this.dataService.projectData
.subscribe((project: Project) => {
this.project = project;
console.log('Project', project);
let d: Dashboard = project.dashboards[0];
this.currentDashboardId = project.dashboards[0].id;
this.dataService.changeCurrentDashboardId(this.currentDashboardId);
this.currentSheetId = project.dashboards.find(x => x.id === this.currentDashboardId).sheets[0].id;
this.dataloaded = true;
});
}
The printed log 'Project' even displays the object correctly. But one line later when accessing a dashboard I am getting undefined. Can't explain why. Maybe anybody of you guys know and can tell me why. I appreciate that. Thanks in advance.
Use first() operator to be sure that the data revived, console.log is a bit tricky, it's not show what happened in correct time,
your code can be like:
this.dataService.projectData
.pipe(first())
.subscribe((project: Project) => {
// your code is here
});
you can use Filter() as well to wait for specific value in your response
something like
this.dataService.projectData
.pipe(filter(project) => project.somevalue !== undefined)
.subscribe((project: Project) => {
// your code is here
});
I'm using ionic's events to pass data from page to page. In this instance I'm passing an array to another page, let's say with two objects. The data I'm wanting to add to is called dataOne and I'm using a life cycle function so that when the user enters the page they will be automatically tested from this function whether or not there is an event to be concatenated onto dataOne. The issue is, the data isn't being added. I'm able to retrieve the data but nothing happens to the table, as I'm still getting the same result.
ts
ionViewWillEnter(){
this.events.subscribe('market', (dataTwo) => {
return this.dataOne = this.dataOne.concat(dataTwo)
})
}
What is 'Market' ? dataOne is array? In my opinion,
dataOne: any[]=[];
...
this.events.subscribe((dataTwo) =>{
this.dataOne.push(dataTwo.market); // if market you want to catch data
}
I have an angular 2 app and I've managed to set up an input on my page with an autocomplete that calls out to an api and does sever side filtering and returning of values. A lot like the tutorial found here.
Now, I'm trying a few more inputs to my page, but I don't need to filter those on the server side. That would be inefficient. Better to just get all the values when my component loads and then filter in the component. This is causing me no shortage of problems. I have an api call that returns 3 string arrays I need. I am getting those from an Angular service using the standard method like so:
getFormFilters(): Observable<FormFilterModel> {
return this._http.get(this.baseUrl+this.getFormFiltersPath)
.map(res => res.json() as FormFilterModel);
}
The model:
export interface FormFilterModel {
array1: string[];
array2: string[];
array3: string[];
}
This works fine, and I get my observable back. Where I'm stuck is how do I now filter these 3 arrays locally? I have my inputs wired up to my form controls just like I do with the server side filtering input. I can't figure out how to get to the actual arrays in my Observable to filter them. Here's where I'm at with that code:
this.filteredArray1$ = this.searchForm.controls.array1Search.valueChanges
.debounceTime(300)
.distinctUntilChanged()
.switchMap(term => //some filtering here of formFilterModel$ to return a subset of array1 based on input)
I can filter an array via RegExp just fine, but getting to the actual array in the observable is something I just can't seem to do.
Subscribe to your api call an store the result in the component. Then, filter the arrays in valuesChanges.map.
ngOnInit() {
this.getFormFilters().subscribe(formFilters => {
this.formFilters = formFilters;
});
this.filteredArray1$ = this.searchForm.controls.array1Search.valueChanges
.debounceTime(300)
.distinctUntilChanged()
.map(search => this.formFilters.array1.filter(value => matches(value, search)))
}
First of all you have to subscribe to the response and then filtered the object that is recieved.
formfilterData :FormfilterModel;
filteredArray1:stringp[]=[];
this.serviceOb.getFormFilters().subscribe((formfilterData)=>{
this.formfilterData=formfilterData;
});
this.formfilterData.array1.filter((data)=>{
this.formfilterData.push(data);
})