I have a problem iterating through a json object to display messages.
The scenario is that I have messages sent from_id to to_id and the jsonData as follow:
jsonData={
"chat":
{
"79":
{
"from":"Testing Page - joe",
"from_id":79,
"to":"userTestName",
"to_id":1548,
"unread":2,
"messages":
[
{"id":154,"page_id":79,"user_id":1548,"text":"this is the first message to be sent by joe","seen":0,"isgroup":0,"group_id":null,"created_at":"2019-04-10 13:54:10","updated_at":"2019-04-10 13:54:10"},
{"id":155,"page_id":79,"user_id":1548,"text":"this is the second message sent to joe","seen":0,"isgroup":0,"group_id":null,"created_at":"2019-04-11 12:37:39","updated_at":"2019-04-11 12:37:39"}
]
},
"44":
{
"from":"Rock Music Band",
"from_id":44,
"to":"userTestName",
"to_id":1548,
"unread":1,
"messages":
[
{"id":156,"page_id":44,"user_id":1548,"text":"Hello this message from rock","seen":0,"isgroup":0,"group_id":null,"created_at":"2019-04-11 13:18:44","updated_at":"2019-04-11 13:18:44"}
]
}
},
"unread":3
}
I am facing a problem to display these messages in a <ul> using angular *ngFor:
<ul>
<li *ngFor="let messageData of jsonData.chat;>
<div class="message-info">
<h4>{{messageData.from}}</h4>
<h4>{{messageData.messages[0].text}}</h4>
</div>
</li>
</ul>
I'm getting the error of not supported object.
ERROR Error: Cannot find a differ supporting object '[object Object]'
of type 'object'. NgFor only supports binding to Iterables such as
Arrays.
What should my jsonData look like in order to display messages? I want each id 79 - `44' to be a separate object.
jsonData is an object and not an array, therefore the error. You might want to use the KeyValuePipe:
<ul>
<li *ngFor="let data of jsonData.chat | keyvalue>
<div class="message-info">
<h4>{{jsonData.chat[data.key].from}}</h4> <!-- Or even better: data.value.from -->
<h4>{{jsonData.chat[data.key].messages[0].text}}</h4> <!-- Or even better: data.value.messages[0].text -->
<!-- Want to loop through your messages? -->
<ul>
<li *ngFor="let message of data.value.messages">{{message.text}}</li>
</ul>
</div>
</li>
</ul>
Though it might be worth it to transform your data into an array.
You have to format your json as an Array in order for ngFor to work,
I think this is what you are looking for :
https://stackblitz.com/edit/angular-h7ezpn?file=src%2Fapp%2Fapp.component.ts
"chat":
[
{"title" :"79",
"content":
{
"from":"Testing Page - joe",
"from_id":79,
"to":"userTestName",
"to_id":1548,
"unread":2,
"messages":
[
{"id":154,"page_id":79,"user_id":1548,"text":"this is the first message to be sent by joe","seen":0,"isgroup":0,"group_id":null,"created_at":"2019-04-10 13:54:10","updated_at":"2019-04-10 13:54:10"},
{"id":155,"page_id":79,"user_id":1548,"text":"this is the second message sent to joe","seen":0,"isgroup":0,"group_id":null,"created_at":"2019-04-11 12:37:39","updated_at":"2019-04-11 12:37:39"}
]
}},
{
"title" :"44",
"content":
{
"from":"Rock Music Band",
"from_id":44,
"to":"userTestName",
"to_id":1548,
"unread":1,
"messages":
[
{"id":156,"page_id":44,"user_id":1548,"text":"Hello this message from rock","seen":0,"isgroup":0,"group_id":null,"created_at":"2019-04-11 13:18:44","updated_at":"2019-04-11 13:18:44"}
]
}}
],
"unread":3
}
Related
I get a result in the JSON Format like these sample from a webservice.
How can i iterate over this items to prensent the objects
HTML Code - not working
<div *ngFor="let item of List">
{{item.Code}}
</div>
JSON Sample
"List": {
"0": {
"Code": "A"
},
"1": {
"Code": "B"
},
"2": {
"Code": "C",
}
}
unfortunally the webservice does not provide this as an Array [] of objects
I want to see the list of all items für the Key "Code"
You can use KeyValuePipe like here.
So the your code would be something like this:
<div *ngFor="let item of List | keyvalue">
{{item.value.Code}}
</div>
As it was not working with
<div *ngFor="let item of List | keyvalue">
{{item.value.Code}}
</div>
Typescript was throwing an error because {{item.value.Code}} was not known.
I did some additional research and found the following solution
<div *ngFor='let key of objectKeys(List)'>
{{List[key].Code}}
</div>
in the typescript class corresponding to the html file you have to add
objectKeys = Object.keys;
I would like to display the user title from the API using the angular js of version 8.2.8 and tried to bind it in the <ul> and <li> with *ngFor .After converting the json values to Array format through this code as given below
search.component.ts :
getUsers()
{
this.githubservice.getUser(this.SearchText);
this.SearchResult = this.githubservice.getUser(this.SearchText).subscribe(
res => {
res.json;
}
);
this.SearchResult = Array.of(this.SearchResult);
}
json data will be received in this format as given below:
[
{
"userId": 1,
"id": 1,
"title": "delectus aut autem",
"completed": false
},
{
"userId": 1,
"id": 2,
"title": "quis ut nam facilis et officia qui",
"completed": false
}
]
search.component.html :( trying to bind the json data stored in the variable SearchResult)
<span><input type="text" (keyup)="onKeyup($event)" /></span>
<span><input type="button" (click)="getUsers()" value="Search" /></span>
<p>{{SearchResult.title}}</p>
<ul>
<li *ngFor="let user of SearchResult">{{SearchResult.title}}</li>
</ul>
See this example from the heros tutorial, and this more complete documentation.
You have placed the loop inside the ngIf directive, but it belongs inside the ngFor. The ngIf should only be testing a boolean condition if it is needed.
For the loop itself, you need this to look something like:
<ol>
<li *ngFor="let user of SearchResult">{{ user.login }}</li>
</ol>
You can't just put the field name inside the ngFor.
If this doesn't answer the question, please provide a minimal, reproducable example including the code in context.
it seems quite simple but some how i can't loop through the items as i would like to
i have this json object
"meters":{
"Rozvadec M11":{
"0":{
"Name":"m11-mcu13_sm114",
"Title":"Svarovaci centrum Flexarc",
"Parent":"m11-mcu13",
"Status":"Running",
"State":false
},
"1":{
"Name":"m11-mcu13_sm115",
"Title":"Brousici centrum Solicad",
"Parent":"m11-mcu13",
"Status":"Running",
"State":false
}
},
"Rozvadec R1-L":{
"0":{
"Name":"r1-l-mcu1_sm100",
"Title":"Amada NCT1",
"Parent":"r1-l-mcu1",
"Status":"Device unavailable",
"State":false
},
"1":{
"Name":"r1-l-mcu1_sm101",
"Title":"Amada 1",
"Parent":"r1-l-mcu1",
"Status":"Device unavailable",
"State":false
},
"2":{
"Name":"r1-l-mcu1_sm102",
"Title":"Amada 2",
"Parent":"r1-l-mcu1",
"Status":"Device unavailable",
"State":false
}
},
what i am trying to do is to loop through all meters to have a list of
"Rozvadec M11"
"Rozvadec R1-L"
and under each have a list of different smartmeters names
i have this in ts
let list = this.http.get('EndpointURL');
list.subscribe (
(response: Response)=>
{this.meters.push(response);
console.log(this.meters);
})
and this in html (i was trying to loop only through the meters first before i nest the for loops)
<ul *ngFor="let meter of meters">
<li>{{ meter}}</li>
</ul>
You have most of your code right but the ngFor is not used in that way. The html tag with the ngFor is what will be repeated and you that's why you should use it in the li instead of the list tag ul. It would be like this for you:
<ul>
<li *ngFor="let meter of meters">
{{meter}}
</li>
<ul>
This exact example is covered here in the docs.
EDIT: If you want to access the key of your list, in this SO answer you can see the new way in Angular6 to retrieve it. It will end up like this for your example:
<ul>
<li *ngFor="let meter of meters | keyvalue">
{{meter.key}}
</li>
<ul>
You can read more about the keyValuePipe in the docs.
I have a nested object with data that I am trying to access with ngFor.
I am able to reach the first part of the data with the first ngFor (app_name, time_stamp etc)
But for some reason I am not getting to the nested object of test_cases. When I try it breaks the whole page and the console keeps telling me "Cannot read property 'test_cases' of undefined" and I can't seem to figure out why...
(first part of) data inside the component:
export class AppComponent {
tests = TESTS;
var TESTS: Test[] = [
{
"app_name": "website",
"time_stamp": "2018-01-20T12:00:00Z",
"test_cases": [
{
"test_name": "View article",
"status": true,
}]
}]
HTML partial:
<div id="tested-app" *ngFor = "let item of tests">
<h2>----<span> {{ item.app_name }} </span>----</h2>
<p id="time"> Time: <span> {{item.time_stamp}} </span> </p>
</div>
<div class="module" *ngFor="let subItem of item.test_cases">
<h3>{{subItem.test_name}}</h3>
</div>
For peeps who are struggling with this:
John Montgomery and Andres M answered this in the comments, I had to put the second div inside the first.
Im new to AngularJS. Now I have a json object from my spring controller, how do i use/print in my jsp?
I tried something like this. the console shows the json perfectely, and with angular it does not...
<div data-ng-init="stats=${stats}">
<li data-ng-repeat="stat in stats">{{stat.name}}</li>
</div>
<script>
console.log(${stats});
</script>
Json:
{ "Types": [{"name": "study", "value":0},{"name": "health", "value":0},{"name": "culture", "value":0},{"name": "nightlife", "value":0},{"name": "other", "value":0},{"name": "friendship", "value":0}] })
Because JSON string must be properly quoted if placed into HTML attribure value, you either escape " characters in JSON or probably better use ' quotes for ngInit:
<div data-ng-init='stats=${stats}'>
<li data-ng-repeat="stat in stats.Types">{{stat.name}}</li>
</div>
Demo: http://plnkr.co/edit/XLIE9VCSn9gL3oO6ULol?p=info
You need to reference the array property of stats.
<li data-ng-repeat="stat in stats.Types">{{stat.name}}</li>