ng-repeat with the nested json array of objects in AngularJs - javascript

I have a nested json array of objects as below. I wanted to parse so that I can read using ng-repeat and display in the html table. In the table, names will become headers and values become cells in each row. can you please help me as how to do this in angularjs ?
[
{
"records":
[
{
"cells": [
{"id": "102", "value": "John"},
{"id": "101", "value": "222"},
{"id": "103", "value": "600987"}
]
},
{
"cells": [
{"id": "103", "value": "69987"},
{"id": "101", "value": "999"},
{"id": "102", "value": "Susan"}
]
}
],
"headers": [
{
"id": "101",
"name": "emp_id"
},
{
"id": "102",
"name": "emp_name"
},
{
"id": "103",
"name": "emp_salary"
}
]
}
]

Here is your table should be like this:
<table>
<tr>
<th ng-repeat="h in list[0].headers">{{h.name}}</th>
</tr>
<tr ng-repeat="record in list[0].records">
<th ng-repeat="cell in record.cells">{{cell.value}}</th>
</tr>
</table>
See a working plunkr https://plnkr.co/edit/MyUaovStvxj58RIy0CW7?p=preview
Update:
And you can use orderBy with ng-repeat as davidkonrad mentioned:
<table>
<tr>
<th ng-repeat="h in list[0].headers | orderBy: 'id'">{{h.name}}</th>
</tr>
<tr ng-repeat="record in list[0].records">
<th ng-repeat="cell in record.cells | orderBy: 'id'">{{cell.value}}</th>
</tr>
</table>

Adding something extra to Joe's answer. If you are planning to get the data from a separate JSON file, you can use the following code in your .js file.
(function () {
'use strict';
angular.module('plunker', [])
.controller('MainCtrl', MainCtrl);
MainCtrl.$inject = ['$scope', '$http'];
function MainCtrl($scope, $http) {
$http.get('[path to your JSON file]/data.json').success(function (data) {
$scope.list= data;
});
}
})();

Related

Populating table based on dynamic created headers AngularJs

First to introduce to my table structure:
<div class="col-md-9">
<table class="table table-bordered">
<thead>
<tr>
<th>Date</th>
<th>Pair</th>
<th id="{{odds.id}}" ng-repeat="odds in list">{{odds.odd.name}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="match in matches ">
<td>{{match.sd | parseMomentDate}}</td>
<td>{{match.h}}-{{match.a}}</td>
<td>{{match.odds.drawNoBet.value}}<span ng-if="!match.drawNoBet.value">--</span></td>
</tr>
</tbody>
</table>
</div>
I am listing odd names, and therefore setting up id attr for the element.
So my problem is how to populate the rest of the table, the table data based on the Id from the table head, every table head to have rows and columns populated based on that id?
I have the next structure of receiving the data:
"id": 4413011,
"sd": "2017-04-27T23:30:00.000+0400",
"h": "Athletic Bilbao",
"a": "Betis Sevilla",
"odds": {
"bothToScore": [
{
"name": "no",
"value": 1.85,
"id": 552240303
},
{
"name": "yes",
"value": 1.95,
"id": 552240338
}
],
"doubleChance": [
{
"name": "12",
"value": 1.22,
"id": 552240012
},
{
"name": "x2",
"value": 2.98,
"id": 552240003
},
{
"name": "1x",
"value": 1.11,
"id": 552240079
}
],
"drawNoBet": [
{
"name": "1",
"value": 1.15,
"id": 552240007
},
{
"name": "2",
"value": 6.15,
"id": 552240267
}
],
"totalGoals": [
{
"name": "under",
"value": 2.15,
"id": 552235662
},
{
"name": "over",
"value": 1.7,
"id": 552235663
}
]
}
},
So for example in the odds object there is a list "bothToScore", therefore "bothToScore" is the id for the table head, and based on that id need to populate the rest of the columns, meaning ;Yes' or 'No'.
Any suggestions?
At this case id mapping is not needed - just ensure same order of <th>s and <tr>s:
angular.module('app', []).controller('ctrl', ['$scope', function($scope) {
$scope.matches = [{
"id": 4413011,
"sd": "2017-04-27T23:30:00.000+0400",
"h": "Athletic Bilbao",
"a": "Betis Sevilla",
"odds": {
"bothToScore": [{
"name": "no",
"value": 1.85,
"id": 552240303
},
{
"name": "yes",
"value": 1.95,
"id": 552240338
}],
"doubleChance": [{
"name": "12",
"value": 1.22,
"id": 552240012
},
{
"name": "x2",
"value": 2.98,
"id": 552240003
},
{
"name": "1x",
"value": 1.11,
"id": 552240079
}],
"drawNoBet": [{
"name": "1",
"value": 1.15,
"id": 552240007
},
{
"name": "2",
"value": 6.15,
"id": 552240267
}],
"totalGoals": [{
"name": "under",
"value": 2.15,
"id": 552235662
},
{
"name": "over",
"value": 1.7,
"id": 552235663
}]
}
}];
$scope.matches.push(JSON.parse(JSON.stringify($scope.matches[0])));
}]);
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='app' ng-controller="ctrl">
<table>
<thead>
<tr>
<th>Date</th>
<th>Pair</th>
<th ng-repeat-start='(key, value) in matches[0].odds' hidden></th>
<th ng-repeat-end ng-repeat='item in value'>{{item.name}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat='match in matches'>
<td>{{match.sd | date}}</td>
<td>{{match.h}} - {{match.a}}</td>
<td ng-repeat-start='(key, value) in match.odds' hidden></td>
<td ng-repeat-end ng-repeat='item in value'>{{item.value}}</td>
</tr>
</tbody>
</table>
</div>

Custom table layout ng-repeat

I'm trying to figure out how to dynamically show a table with a JSON element but in a format that is hard to do with tables. I'm using AngularJs 1.6.4 and Bootstrap but I'm kind of new at Angular. My JSON:-
"foo": {
"name": "foo",
"displayName": "FOO SHOW",
"environments": [
{
"id": "one",
"name": "PROD",
"url": "http://my-prod-url.com"
},
{
"id": "two",
"name": "QA",
"url": "http://my-qa-url.com"
},
{
"id": "three",
"name": "DEV",
"url": "http://my-dev-url.com"
}
]
},
"bar": {
"name": "bar",
"displayName": "BAR SHOW",
"environments": [
{
"id": "four",
"name": "PROD",
"url": "https://my-prod2-url.com"
},
{
"id": "five",
"name": "QA",
"url": "https://my-uat2-url.com"
},
{
"id": "six",
"name": "DEV",
"url": "https://my-dev2-url.com"
}
]
}
I want to display this in a way that dynamically shows everything but based on application on the top and environment on the left of a table. For example:-
ENV | FOO | BAR
PROD| fooProdUrl| barProdUrl
QA | fooQaUrl| barQaUrl
DEV | fooDevUrl| barDevUrl
I've tried this but it's not dynamic and it doesn't display in the order I want:-
<table class="table">
<thead>
<tr>
<th class="text-center">Environment</th>
<th class="text-center" data-ng-repeat="list in applications">{{list.displayName}}</th>
</tr>
</thead>
<tbody class="text-center">
<tr data-ng-repeat="list in applications">
<th class="text-center">
{{list.environments[0].name}} and {{list.name}}
</th>
<td>
{{list.environments[0].url}} and {{list.name}} and {{list.environments[0].name}}
</td>
<td>
{{list.environments[1].url}} and {{list.name}} and {{list.environments[1].name}}
</td>
</tr>
</tbody>
</table>
This displays it in rows but not in the column way I want it.
Should I reorganize my JSON object? Split it in a different way? I've been stuck for a little bit on this.
Thanks!

fill json data in html dynamically

I want to fill a table from a json file using AngularJS.
json file may vary from time to time (dynamic data).
Requirement is: Fill the table in html by parsing json file.
Table is in view.html file and AngularJS code should be in view.js.
JSON file: (there may be even more no of id's under services tree)
{
"result": {
"services": [
{
"id": 1,
"name": "My UI for some project that I'm doing that won't fit",
"application": "app",
"message": "application",
"status": 1
},
{
"id": 2,
"name": "My DB for some project that I'm doing",
"application": "app1",
"message": "application1",
"status": 3
},
{
"id": 3,
"name": "Another service",
"application": "app2",
"message": "application2",
"status": 3
}
],
}
}
The output table should look like:
PS: the table alignment should be set as the name value may or may not has more info.
Thanks
Although, like #Johannes Jander saying, Stackoverflow is not a "write my code for me" service I will show you how to do this.
If you don't mind that the order of the columns will be different, you can easily iterate throw the object's properties and you wouldn't need to manipulate the json object. If the order is important, let me know and I will help you to figure it out.
To read more about what we have here please follow those links:
ng-repeat docs.
How can I iterate over the keys, value in ng-repeat in angular
Now, to the code:
angular.module('app', []).
controller('ctrl', function($scope) {
$scope.json = {
"result": {
"services": [
{
"id": 1,
"name": "My UI for some project that I'm doing that won't fit",
"application": "app",
"message": "application",
"status": 1
},
{
"id": 2,
"name": "My DB for some project that I'm doing",
"application": "app1",
"message": "application1",
"status": 3
},
{
"id": 3,
"name": "Another service",
"application": "app2",
"message": "application2",
"status": 3
}
],
}
}
});
table {
border-collapse: collapse;
}
td {
border: 1px solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div data-ng-app="app" data-ng-controller="ctrl">
<table data-ng-if="json.result.services.length > 0">
<thead>
<tr>
<th data-ng-repeat="(key, value) in json.result.services[0]" data-ng-bind="key"></th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="service in json.result.services">
<td data-ng-repeat="(key, value) in service" data-ng-bind="value"></td>
</tr>
</tbody>
</table>
</div>

Show table depending on json response

I have a json data with arrays of parameters like Sales, Tax etc. On click of a particular parameter from one page, the landing page should show the table for that particular parameter.
{
"Sales": [
{
"Date": "2015-08-01 23:35:15.652",
"Val": 78
},
{
"Date": "2015-08-01 22:35:15.652",
"Val": 82
},
{
"Date": "2015-08-01 21:35:15.652",
"Val": 80
},
{
"Date": "2015-08-01 21:15:15.652",
"Val": 100
},
{
"Date": "2015-07-27 12:57:15.652",
"Val": 94
}
],
"Tax": [
{
"Date": "2015-08-01 23:35:15.652",
"Min": 78,
"Max":150
},
{
"Date": "2015-08-01 22:35:15.652",
"Min": 50,
"Max":120
},
{
"Date": "2015-08-01 21:35:15.652",
"Min": 65,
"Max":150
},
{
"Date": "2015-08-01 21:25:15.652",
"Min": 70,
"Max":190
},
{
"createdOn": "2015-08-01 21:15:15.652",
"Min": 90,
"Max":200
}
]
}
My controller
angular.module('starter.controllers', [])
.controller('TableCtrl','$scope', '$http', function($scope, $http) {
$http.get('js/data.json').success(function(response){
if(response.data.Sales!=null){
$scope.data =response.data.Sales;
}
if(response.data.Tax!=null){
$scope.data =response.data.Tax;
}
});
});
How do I show table dynamically from the data? Since Sales table will contain 2 columns and Tax table will contain 3 columns.
Table for Sales
<table ng-controller="TableCtrl">
<thead>
<th>
<td>Date</td>
<td>Value</td>
</th>
</thead>
<tbody>
<tr ng-repeat="item in data">
<td>{{item.Date}}</td>
<td>{{item.Val}}</td>
</tr>
</tbody>
</table>
Table for Tax
<table ng-controller="TableCtrl">
<thead>
<th>
<td>Date</td>
<td>Min</td>
<td>Max</td>
</th>
</thead>
<tbody>
<tr ng-repeat="item in data">
<td>{{item.Date}}</td>
<td>{{item.Min}}</td>
<td>{{item.Max}}</td>
</tr>
</tbody>
</table>
How to display different tables based on condition using same Controller, TableCtrl?
In your controller, separate data into $scope.sales and $scope.tax:
if(response.data.Sales != null){
$scope.sales = response.data.Sales;
$scope.tax = null;
}
if(response.data.Tax != null){
$scope.tax = response.data.Tax;
$scope.sales = null;
}
Then, in html use ng-if directive:
<div ng-controller="TableCtrl">
<table ng-if = "sales">
<thead>
<th>
<td>Date</td>
<td>Value</td>
</th>
</thead>
<tbody>
<tr ng-repeat="item in sales">
<td>{{item.Date}}</td>
<td>{{item.Val}}</td>
</tr>
</tbody>
</table>
<table ng-if = "tax">
<thead>
<th>
<td>Date</td>
<td>Min</td>
<td>Max</td>
</th>
</thead>
<tbody>
<tr ng-repeat="item in tax">
<td>{{item.Date}}</td>
<td>{{item.Min}}</td>
<td>{{item.Max}}</td>
</tr>
</tbody>
</table>
</div>
If you have a set of fixed types such as Sales, Tax etc., the hard coded version like #Majid provided is fine. However, you could make a more dynamic version where the table adjusts to the json arrays provided.
Consider the following data:
var data={
"Sales": [
{
"Date": "2015-08-01 23:35:15.652",
"Val": 78
},
{
"Date": "2015-08-01 22:35:15.652",
"Val": 82
},
{
"Date": "2015-08-01 21:35:15.652",
"Val": 80
},
{
"Date": "2015-08-01 21:15:15.652",
"Val": 100
},
{
"Date": "2015-07-27 12:57:15.652",
"Val": 94
}
],
"Tax": [
{
"Date": "2015-08-01 23:35:15.652",
"Min": 78,
"Max":150
},
{
"Date": "2015-08-01 22:35:15.652",
"Min": 50,
"Max":120
},
{
"Date": "2015-08-01 21:35:15.652",
"Min": 65,
"Max":150
},
{
"Date": "2015-08-01 21:25:15.652",
"Min": 70,
"Max":190
},
],
"Inventory": [
{
"Type": "Car",
"Amount": 100,
},
{
"Type": "Bike",
"Amount": 32,
},
{
"Type": "Shoes",
"Amount": 677,
},
]
};
Controller:
function mainCtrl() {
this.data=data;
}
angular
.module('app', [])
.controller('mainCtrl', mainCtrl);
The below html code will now use the first object in each array to print out the property names, and then print each object from the array into to the table accordingly.
<body ng-controller="mainCtrl as main">
<div ng-repeat="(name, table) in main.data">
<h3>{{name}}</h3>
<table>
<thead>
<tr>
<!-- Iterate and print field names -->
<th ng-repeat="(key, value) in table[0]">{{key}}</th>
</tr>
</thead>
<tbody>
<!-- Print rows -->
<tr ng-repeat="row in table">
<td ng-repeat="value in row">{{value}}</td>
</tr>
</tbody>
</table>
</div>
</body>
Live example here: http://jsbin.com/pafanuwoka/edit?html,js,output
Having this solution you need to make sure that all objects in each array are alike as we are printing the field names from the first object in each array. But you are also able to add more json arrays into data field.
If this is a common occurrence in your application, you should probably consider adding this as a directive. Example here: http://jsbin.com/gayirinifo/edit?html,js,output

AngularJS - Calculating length of JSON array

I have a set of JSON data and within it, i am trying to calculate the length of an array (Infos):
My JSON:
"Association": {
"Items": [
{
"AssocName": {
"SurName": "BLOGGS",
"Title": "MR",
"ForeName": "HAPPY"
},
"Details": [
{
"Name": {
"SurName": "BLOGGS",
"Title": "MR",
"ForeName": "HAPPY"
},
"Infos": [
{
//Some Data
//Some Data
//Some Data
},
{
//Some Data
//Some Data
//Some Data
},
{
//Some Data
//Some Data
//Some Data
},
{
//Some Data
//Some Data
//Some Data
}
]
}
]
},
{
"AssocName": {
"SurName": "BLOGGS",
"Title": "MRS",
"ForeName": "BLUE"
},
"Details": [
{
"Name": {
"SurName": "BLOGGS",
"Title": "MRS",
"ForeName": "BLUE"
},
"Infos": [
{
//Some Data
//Some Data
//Some Data
},
{
//Some Data
//Some Data
//Some Data
}
]
}
]
}
]
}
My HTML:
<tr ng-repeat-start="associations in Association.Items track by $index">
<td>
{[{associations.AssocName.Title}]}
{[{associations.AssocName.ForeName}]}
{[{associations.AssocName.SurName}]}
</td>
<td>
{[{ associations[$index].Details.Infos.length }]} of Details
</td>
</tr>
But no valus seems to be displayed... The Title, Forename and Surname are displaying as expected.
Just try out this way as shown below
Working Demo
<table>
<tr ng-repeat="associations in Association.Items">
<td>
{{associations.AssocName.Title}}
{{associations.AssocName.ForeName}}
{{associations.AssocName.SurName}}
</td>
<td>
[{{associations.Details[0].Infos.length}}] of Details
</td>
</tr>
</table>
You don't need index
<tr ng-repeat-start="associations in Association.Items">
<td>
{[{associations.AssocName.Title}]}
{[{associations.AssocName.ForeName}]}
{[{associations.AssocName.SurName}]}
</td>
<td>
{[{ associations.Details.Infos.length }]} of Details
</td>
</tr>

Categories

Resources