I know this question has been asked before, but please read this completely before you FLAG me... I have tried what the other posts have said, but I cannot stop the error.
Question: I am getting this cursed error,"Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays." and I don't understand what I am doing wrong, so WHAT AM I DOING WRONG?
Explanation: I am reaching out to saleforce to retrieve an array of over 1400+ responses. I have been working with Angular long enough to know how to put the code together, but don't fully understand it. This is the same approach I am using for other request I have sent to salesforce.
My Attempts: So the first SO post I read (Angular: Cannot find a differ supporting object '[object Object]') spoke about the format of the array. The array is coming back in the same format as others (which have no error), and I have tried to even format the response into .json() to be sure.
The second post (Cannot find a differ supporting object '[object Object]') said something about using similar names, but I don't believe that applies to me.. and regardless they didn't solve my issue.
THE CODE:
This reaches out the a service that reaches to the salesforce API
getProviders(){
this.reqObj.email = this.cus.getCurrentUser();
this.dss.allProviders(this.reqObj).subscribe(res => {
this.serviceProvider = res
console.log("All Providers", res);
})
} //End getProviders
How I link to the API
allProviders(reqObj): Observable<Object>{
return this.http.get("https://xxxxxx.execute-api.us-east-
.amazonaws.com/prod").map(res => res);
}
iteration in the HTML
<div class="table-row n-txt" *ngFor="let sList of
serviceProvider; let i=index" (click)="openProviderAction(sList)">
<div class="table-cell c1">{{sList.Name}}</div>
<div class="table-cell c2" > -- -- </div>
<div class="table-cell c2" > {{sList.county__c}} </div>
<div class="table-cell c3" > {{sList.Phone}}</div>
<div class="table-cell c4" >
Is it possible that the size of the array is causing the error???
I really hope everyone can empathize with me here. Not sure how i was so careless and didn't think to look, but i declared the object serviceProvider likes so => serviceProvider: any = {} ... This was a simple fix, to serviceProvider: any = []; Thank you guys regardless, i appreciate the information and outside eyes.
Related
I am having trouble to have a map within a map.
As you can see below I have commented several tries, ideally I wanted to use workItem.bullets.map((bulletItem, i)=><li key={i}>{bulletItem}</li>)
directly.
If I use it directly I will have "Cannot read properties of undefined (reading 'map')".
On this version I will get a undefined is not iterable (cannot read property Symbol(Symbol.iterator)) even though console.log seems to work fine and shows the type as Array as expected. The Array.from is useless but I since I am not understanding what's happening I gave it a try.
const work = this.props.data.work.map( workItem => {
console.log(workItem.bullets);
//let bulletPts = workItem.bullets.map((bulletItem, i)=><li key={i}>{bulletItem}</li>);
//let bps = workItem.bullets.map((bulletItem, i)=>"toto");
let array = Array.from(workItem.bullets);
return (
<div key={workItem.company}>
<h3>{workItem.company}</h3>
<p className="info">
{workItem.title}
<span>•</span> <em className="date">{workItem.years}</em>
</p>
<p>{workItem.description}</p>
<ul>
{
array.map(bulletItem => "test")
}
</ul>
</div>
);
});
I also took a look at How to map inside a map function in reactjs as it looked like a similar problem but I was not able to apply it to my issue.
I don't think it is needed but If you want to see the full project I am trying to add bullet points for resume, resumeData.json needs to be modified to contain some bulletPoints.
https://github.com/nordicgiant2/react-nice-resume
There is somethign wrong with your JSON :D
Im trying to aplly tis simple filter ased on a query of a list that with each input the list will narrow the possibilities
HTML:
<mat-form-field>
<mat-label>Search for users</mat-label>
<input #query type="text" matInput placeholder="search" (keyup)="filter(query.value)">
</mat-form-field>
<div *ngIf="filteredUsers">
And the function:
filter(query){
this.filteredUsers= query?
this.users.filter(user=>user.username.includes(query)):
this.users;
}
<ul *ngFor="let u of filteredUsers">
<li>
{{u.username}}
</li>
</ul>
</div>
The error I get as I input a character id that filter is undefined, but since both arrays fileterdUsers and Users are populated, I can't understand why this error is beig thrown...Any ideas?
EDIT: the ngOninit:
ngOnInit(): void {
this.dataService.getUsers()
.pipe(first())
.subscribe(users=>{
this.filteredUsers=this.users=users;
console.log(users, this.filteredUsers) -> i get the data
})
}
Edit 2 :
EDIT
filter(query){
console.log(this.users)
this.filteredUsers= query?
this.users.filter(user=>user.username.includes(query)):
this.users;
console.log(this.users)
}
Like this I don't see any logs...
EDIT 3: snapshot
Ok, maybe I have an idea of whats going on. The first elements of my ngFor are empty as you can see in the picture. Is this the reason for Angular's complaint? (your last fix didn't solve the issue as well)
If console.log doesnt log your array, it means its empty at the time filter(query) is being called. And I just noticed the way you are assigning the array isnt really what you want since arrays work by reference.
ngOnInit(): void {
this.dataService.getUsers()
.pipe(first())
.subscribe(users=>{
this.filteredUsers=users;
this.users=users; //just to be sure
console.log(users, this.filteredUsers) -> i get the data
})
}
filter returns an array so I guess you want to assign that to the filteredUser. I removed the code that made no sense.
filter(query){
console.log(this.users)
this.filteredUsers = query ? this.users.filter(user=> user.username && user.username.includes(query)): this.users
console.log(this.filteredUsers)
}
Whith the help and envolvment of #ukn I found the solution: the first elements of the array - seen on pic - , in this case users, were empty, so the solution was deleting those elements. The filter function is now working properly, giving me the names as I input a single char. The list gets updated trying to match the chars I input.
Below is some shortened HTML that I have, and an attempt at some protractor code.
What I'm trying to do, is do a click on an i element. I'd like to be able to do the click, based on what the ID is, which is in a sibling element.
The below code doesnt work. I've also tried doing a filter inside a filter, and everything I try is causing errors. Can anyone help please? The error I get with this attempt is "Cannot read property element of undefined.
Can anyone help with this please? Have spent a lot of time on this so far!
Thanks.
element.all(by.repeater('data in ctrl.data')).filter(function(elem){
return elem.element(by.css('div.case-info span')).getText() == id
}).then(function(filteredElements){
filteredElements.first().element(by.css('i.fa')).click();
});
<div ng-repeater="data in ctrl.data">
<div class="case-info">
<span>AN ID HERE</span>
<div>Other stuff here thats not really relevant</div>
</div>
<i class="fa fa-red"></i>
</div>
Here's what worked for me in the end, with help from the above two answers...
element.all(by.repeater('data in ctrl.data')).filter(function(elem){
return elem.element(by.css('div.case-info span')).getText().then(function(text){
return text === id;
});
}).first().element(by.css('i.fa')).click();
Thanks for your help.
You've almost got it... as #igniteram1 said, you just need to wait for getText() to return it's promise (though I would advise against using an expect in the loop). Something like this...
element.all(by.repeater('data in ctrl.data')).filter(function(elem){
return elem.element(by.css('div.case-info span')).getText().then(function(text){
return text === id;
}) ;
}).then(function(filteredElements){
filteredElements.element(by.css('i.fa')).click();
});
You should use an XPath. It will be faster and easier to maintain:
var xpath = "//div[#ng-repeater='data in ctrl.data'][.//span[text()='" + id + "']]/i";
element(by.xpath(xpath)).click();
Can you try something like this -
element.all(by.repeater('data in ctrl.data')).filter(function(elem){
return elem.element(by.css('div.case-info span')).getText().then(function(text){
expect(text).toEqual(id); // your id here
}).then(function(filteredElements){
filteredElements.first().element(by.css('i.fa')).click();
});
so I have this code in my chatting application, its for send message to the partner.
$scope.messages = {
from : $scope.datauser['data']['_id'],
fromname : $scope.datauser['data']['nama'],
to : $scope.tmpuserid,
message : $scope.tmp['sendmessage'],
time : moment()
};
I want to add text-to-speech features in my application, the question is how I take the value from $scope.messages but just the message because if I just write $scope.messages, TTS will read all data from from until time
Not sure exactly what you want, but it would be something like:
<div ng-repeat="message in messages">
<p>{{message.message}}</p>
</div>
EDIT: This answer is for iterating through an array of messages.
If it were just one messages object it would be:
<p>{{messages.message}}</p>
Maybe I'm missing something in your question, but if all you want to extract just the message from the messages $scope object you would use JS object dot notation e.g.
var justMessage = $scope.messages.message;
// justMessage = $scope.tmp['send message'];
// OR parse an array
var myPartnerMessages = [];
angular.forEach($scope.messages, function(msg, key) {
this.push(msg.message);
}, myPartnerMessages);
You can get the value from $scope as follows:
View.html
<div ng repeat="item in messages">
<div>{{item.message}}</div>
</div>
You just call the property as $scope.messages.message. Or since you already had it on another scope variable, you can call it as $scope.tmp['sendmessage'].
If you are trying to access from the HTML side, you would use it as this:
<p>{{messages.message}}</p>
Not exactly sure if this is what you need from reading your question, though.
if it is a single object not an array if is an array you should use ng-repeat
On js end you can get it by
$scope.messages.message
On html end you can get it by
{{messages.message}}
I have the following data setup in firebase.
{
"data": {
"lava14mod1":"down",
"lava14mod2":"up"
}
}
I'm able to access it in my React app. But I can only access it as a (key,value) pair combined as one string.
I cannot access the key or value separately using,
<li>{this.state.data[0]['.key']}</li>
I'm getting this error,
Uncaught TypeError: Cannot read property '.key' of undefined
Uncaught TypeError: Cannot read property '_currentElement' of null
Here's the full code, running on plunker, (without the error line)
http://plnkr.co/edit/zjFKsYAzfYrzGmedVEV6?p=preview
I've been pouring through the docs and still can't figure this out. I'm following the data structure shown in firebase docs,
[
{
".key": "-Jtjl482BaXBCI7brMT8",
".value": 100
},
{
".key": "-Jtjl6tmqjNeAnQvyD4l",
"first": "Fred"
"last": "Flintstone"
},
{
".key": "-JtjlAXoQ3VAoNiJcka9",
".value": "foo"
}
]
Firebase documentation
Is there some problem with my syntax? How do I access the key or value separately?
Thank you so much.
You're getting that error because the this.state.data object does not have the keys you're trying to access in render.
This is easy to see if you simply put a console.log(this.state.data) in render. Doing so gives me something like this in the console:
> []
> [Object]
> [Object, Object]
> [Object, Object, Object]
So, render is being called four different times, once each time that this.state.data is being updated with a new key. But, in your render, you don't consider the fact that keys [0] and [1] might not exist - you try to access them without checking them first.
Now I'm not sure exactly why your state is being updated piecemeal, but it probably has something to do with the ReactFireMixin which I have no experience with. Fetching form Firebase is clearly an asynchronous action (since you have to grab data from the cloud) so you need to make accommodations for that.
The most straightforward fix is simply checking to make sure that the key you want to access actually exists on an object before you try to access it (which is a good practice in most cases to avoid exactly this kind of error!)
render: function() {
return (
<div>
from firebase,
{this.state.data ? <li>{this.state.data}</li> : undefined}
{this.state.data && this.state.data[0] && this.state.data[0][".key"] ? <li>{this.state.data[0][".key"]}</li> : undefined}
{this.state.data && this.state.data[1] && this.state.data[1][".key"] ? <li>{this.state.data[1][".key"]}</li> : undefined}
local var,
<li>{data2[0]['.key']}</li>
</div>
);
}
http://plnkr.co/edit/7XXaOIQCQcyGneqEqa88?p=preview
An even better solution would be to use Array.map to convert whatever array this.state.data is at the time directly into some kind of list. This is a very common pattern in React applications because you'll often keep lists of data as arrays and then want to display it dynamically.
render: function() {
return (
<div>
from firebase,
{this.state.data.map(function(ea){return <li>Key: <strong>{ea[".key"]}</strong>, Value: <strong>{ea[".value"]}</strong></li>})}
local var,
<li>{data2[0]['.key']}</li>
</div>
);
}
http://plnkr.co/edit/b1j10M1i635hvapFxZbG?p=preview
More about Array.map()