I have two json file I want to generate a dynamic table using anything like angularjs/jquery. I tried angularjs ng-repeat but not succeed.
first JSON
$scope.myHospital = [
{"name":"hos1"},
{"name":"hos2"},
{"name":"hos3"},
{"name":"hos4"},
{"name":"hos5"}
];
Second JSON
$scope.data = [{
"category":"first category",
"procedure":[{
"name":"pro1",
"hospital": [
{"price":"344"},
{"price":"467"},
{"price":"423"},
{"price":"674"},
{"price":"313"}
]
}, {
"name":"pro2",
"hospital": [
{"price":"234"},
{"price":"568"},
{"price":"136"},
{"price":"567"},
{"price":"666"}
]
}, {
"name":"pro3",
"hospital": [
{"price":"349"},
{"price":"469"},
{"price":"429"},
{"price":"679"},
{"price":"319"}
]
}]
}];
And I want a table like this. Is it possible then please provide me a solution or if not then what changes required in my JSON to achieve this.Thanks
You can have nested ng-repeat in order to achieve this. Assuming first hospital price maps to hos1, you can do something like this,
<table>
<tr ng-repeat="(hosIndex, hos) in myHospital">
<td width="100px" ng-bind="hos.name"></td>
<td width="100px" ng-repeat="pro in data[0].procedure"
ng-bind="pro.hospital[hosIndex].price">
</td>
</tr>
</table>
DEMO
Related
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!
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 the following json data saved in json column in postgres database
{
"runway": [
{"number":"13R/13L", "length":"14511", "lengthuom":"ft"},
{"number":"10R/15L", "length":"98641", "lengthuom":"ft"},
{"number":"16R/22L", "length":"65410", "lengthuom":"ft"}
]
}
I'm tryig to get it by ng-repeat but I don't know how.
I try with the following code
<tr ng-repeat="ass in assetb track by $index">
<td>{{ass.runway.number}}</td>
</tr>
Can anyone help me please to display this data in table?
Check out this may help you :--
function MyController($scope){
var data = {"runway":[ {"number":"13R/13L", "length":"14511", "lengthuom":"ft"},
{"number":"10R/15L", "length":"98641", "lengthuom":"ft"},
{"number":"16R/22L", "length":"65410", "lengthuom":"ft"} ]}
$scope.list = data.runway;
}
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script>
</head>
<body>
<div ng-controller="MyController">
<p ng-repeat="l in list track by $index">{{l.number}}</p>
</div>
</body>
</html>
Remove the line track by $index and use like
<tr ng-repeat="ass in assetb.runway">
<td>{{ass.number}}</td>
</tr>
Fiddle
Get your data from database and store it in $scope variable. Something like:
$scope.assetb = {
"runway": [
{"number":"13R/13L", "length":"14511", "lengthuom":"ft"},
{"number":"10R/15L", "length":"98641", "lengthuom":"ft"},
{"number":"16R/22L", "length":"65410", "lengthuom":"ft"}
]
};
And since ng-repeat requires an array, modify your HTML something like this:
<tr ng-repeat="ass in assetb.runway track by $index">
<td>{{ass.number}}</td>
</tr>
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/