Angular2 Unable to print JSON Nested array
help me with nested array problem. Unable to print User_name, User_id and User IRN..
My Component.ts
this.apiService.getIM().subscribe((getIM) => {
this.iOverview = getIM['message'];
console.log(this.iOverview); //This print the whole array.
});
HTML Code
<tr *ngFor="let iUsers of iOverview?.response?.i_details?.user_details | slice:0:10;">
<td>
<div>
<a href="javascript:void(0)"
class="text-default font-weight-semibold letter-icon-title">{{ iUsers.user_name }}</a>
</div>
</div>
</td>
</tr>
My Json Output
{
"message": {
"response": {
"res_type": "IM Users", //able to print this value
"acc_id": "1234567890",
"i_details": [
{
"user_details": [
[
{
"user_name": "admins", //not able to print this value.
"user_id": "MyGroups1",
"user_arn": "user:763526717345"
}
]
]
}
]
}
}
}
Have you noticed that the properties you are trying to access are nested in another array? "user_details": [[...]]. Try accessing it like this:
*ngFor="let iUsers of iOverview?.response?.i_details?.user_details[0]
Hope it helps!
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 want to display content from the firebase I get the data from HTTP get request and I want to display it using ngFor
here is how i get the data
///a service
getMessages(){
return this.http.get('https://bigproject-dd88e.firebaseio.com/data.json')
.map((response:Response)=>{
const data: Message[]=response.json();
return data;
}
).catch(
(error:Response)=>{
return Observable.throw('something went wrong');
}
);
}
and here is my component
export class MessagesComponent implements OnInit {
Message=[];
constructor(private global:GlobalService) {
}
ngOnInit() {
this.GenaerateMessages();
}
GenaerateMessages(){
this.global.getMessages().subscribe(
Message=>this.Message=Message
);
}
}
and here is my HTML
<div *ngFor="let item of Message | keyvalue">
<p>{{item.value|json}}</p>
</div>
I get this on the screen
[ { "email": "loay-gohan#hotmail.com", "message": "loayy", "name": "loay", "phone": "123123123" } ]
[ { "email": "example#example", "message": "hi", "name": "..", "phone": "123123" } ]
how can I reach the inside fields name, message, phone...
it looks like eachitem.value contains one array with one object. If this is a case you can reach it like this:
<div *ngFor="let item of Message | keyvalue">
<div>EMAIL: {{ item.value[0].email }}</div>
<div>MESSAGE: {{ item.value[0].message }}</div>
<div>NAME: {{ item.value[0].name }}</div>
<div>PHONE: {{ item.value[0].phone }}</div>
<pre>{{ item.value | json }}</pre>
</div>
If item.value array has more than one object you might want to loop it wit additional inner ngFor
You do not use value.key. Don't you need it?
Sorry I couldn't put a good title but I hope you will understand my question.
In my html page, I am using AngularJS to show some informations here's my code:
<tr ng-repeat="d in list">
<td>{{d.nm}}</td>
<td>{{d.cty}}</td>
<td>{{d.hse}}</td>
<td>{{d.yrs}}</td>
</tr>
Now what I want to do in the actual page is to show only the name, link this page to another one that contains the details in order to get cleaner pages.
So here's my plan
<tr ng-repeat="d in list">
<td ng-href="details.html">{{d.nm}}</td>
</tr>
and in details.html I want to show only the details about the name I clicked on.
For example if I have:
{
["nm": "xxx",
"cty": "yyy",
"hse": "zzz",
"yrs": 2016
],
["nm": "aaa",
"cty": "bbb",
"hse": "ccc",
"yrs": 2014
]
}
So If I click on xxx in my home page, in details.html I should get only yyy, zzz and 2016 etc...
Is that possible?
EDit
app.factory('myapp', ['$http', function($http) {
function getLists() {
var tab = ['url1', 'url2', 'url3'];
var list = [];
for(i = 0; i < tab.length; i++) {
$http.get(tab[i])
.then(function(res) {
list.push(res.data);
});
}
return list;
}
return {
getLists: getLists
};
]);
Controller:
$scope.list = myapp.getLists();
If they are in same controller
<tr ng-repeat="d in list">
<td ng-href="details.html" ng-click="getDetails(d)">{{d.nm}}</td>
</tr>
in Controller :
$scope.getDetails = function(data){
$scope.selectedData = data;
}
In details.html :
<tr ng-repeat="d in selectedData">
<td>{{d.nm}}</td>
<td>{{d.cty}}</td>
<td>{{d.hse}}</td>
<td>{{d.yrs}}</td>
</tr>
And the JSON you provided is not a valid one
change that to :
[
{"nm": "xxx",
"cty": "yyy",
"hse": "zzz",
"yrs": 2016
},
{"nm": "aaa",
"cty": "bbb",
"hse": "ccc",
"yrs": 2014
}
}
I need to get nested products from JSON to my html in <div ng-repeat="order in orders"></div> I tried many versions of getting products values(name, description etc.) but none of them works. How to do this ?
JSON:
[
{
"id":3,
"date":"00:00:00",
"user":{
"id":1,
},
"orderState":{
"id":1,
},
"products":[
{
"id":1,
"name":"Bosch POF 1200",
"description":"1200W",
"enabled":true,
"price":459,
},
{
"id":9,
"name":"Graphite 58G782",
"description":"a",
"enabled":true,
"price":429,
}
]
}
]
Controller
OrdersService.retrieveAllByCurrentUser().then(function(response) {
$scope.orders = response.data;
console.log(response.data);
}, function(error) {
registerError(error, 'retrieving all orders');
});
The ng-repeat directive creates a new scope, which means that you should be able to loop through the products within it like this:
<div ng-repeat="order in orders">
<div ng-repeat="product in order.products"> e.g. {{product.name}} </div>
</div>
I would also advise to write a directive for dealing with that kind of stuff, because your code can get unreadable really fast. Don't take my word for it though as I am no Angular expert.
Create a nested ng-repeat like this to access the products information:
<div ng-repeat="order in orders">
<div ng-repeat="product in order.products">
<h1 ng-bind="product.name"></h1>
<p ng-bind="product.description"></p>
</div>
</div>
For each order it will go into order.products and loop out the information as product, then you can access the information in product via dot notation, like product.name for example.
You can do nested ng-repeat in html
<div ng-repeat="order in orders">
<div ng-repeat "product in order.products">
<span>{product.name}}</span>
<span>{{product.description}}</span>
</div>
</div>
I have this Backbone App where I display my data/json with HandlebarsJS.
Now my API returns nested JSON data:
{
"Live": [
{
"artist_name": "some artist",
"video_title": " some video title",
"video_thumbnail": "some thumbnail"
}
],
"Others" : [
{
"artist_name": "some artist",
"video_title": " some video title",
"video_thumbnail": "some thumbnail"
}
]
}
I tried to do
{{#each Live}}
<div>
<img src="{{video_thumbnail}}">
<h2>{{video_title}}</h2>
<h2>{{artist_name}}</h2>
</div>
{{/each}}
But that did not work...
Anyone who know what to do? thanks in advance...
Handlebar templates can be used in two ways.
1. We can save the file with (.hbs)
2. Second way is we need the handlebar template in script tag. Provided same in [jsfiddle][1] , I have provided link, you can check the below link
[1]: https://jsfiddle.net/trilokvallamkonda/cLgzf21y/13/