I'm using Angular JS to retrieve some data with JSON. With these data I will build some panels, one for each object.
I have a list of customers, and each customers has a specific name and color:
$scope.customers = [{
"samsung": [
{ "color": "#fcd5b4", "logo": 'img/samsug.png' },
],
"htc": [
{ "color": "#ff66ff", "logo": 'img/htc.png' },
],
"hp": [
{ "color": "#acd5b4", "logo": 'img/hp.png' },
]
}];
In the HTML I should write:
<div ng-repeat="customer in customers" style="background-color: {{customer.samsung.color}}">
<table><tbody>
<tr><td class="logo">
<img src="{{customer.samsung.logo}}">
</td></tr>
</tbody></table>
But later I will not know the names of customers.
How can I repeat all elements without knowing the name of customers?
There is a way to get (key,value) pair in ng-repeat. I hope and thought this is exactly match your context. You have some array confusion in your code what should be repeat in the html part.
Script - you missed flower brace in the end
$scope.customers = [
{
"samsung": [
{
"color": "#fcd5b4", "logo": 'img/samsug.png', "numbers":[{"number": 123}, {"number": 938103}, {"number": 93810}]
},
],
"htc": [
{
"color": "#ff66ff", "logo": 'img/htc.png' ,"numbers":[{"number": 6341}, {"number": 345134}, {"number": 345134}]
},
],
"hp": [
{
"color": "#acd5b4", "logo": 'img/hp.png' ,"numbers":[{"number": 1346}, {"number": 613461}, {"number": 77134}]
},
]
}
];
And your code be
<div ng-repeat="(key,value) in customers[0]" style="background-color: {{value[0].color}}">
<table>
<tbody>
<tr>
<td class="logo">
<img ng-src="{{value[0].logo}}">
<ul>
<li ng-repeat="(keynum, valuenum) in value[0].numbers">{{valuenum.number}}</li>
</ul>
</td></tr>
</tbody></table>
Fiddle
style="background-color: {{customer.color}}"
and
<img ng-src="{{customer.logo}}">
this should do it.
Your customer is the current element of your array...
Related
Group the table cells based on the decimal points.
Plunker
Sample JSON:
[
{
"data1": [
{
"name": "Download",
"id": "1.1.1"
},
{
"name": "Download",
"id": "1.1.2"
},
{
"name": "Download",
"id": "1.2"
},
{
"name": "Download",
"id": "1.3"
},
{
"name": "Download",
"id": "1.4"
}
]
},
{
"data2": [
{
"name": "Download",
"id": "2.1"
},
{
"name": "Download",
"id": "2.2"
}
]
},
{
"data3": [
{
"name": "Download",
"id": "3.1.1"
},
{
"name": "Download",
"id": "3.1.2"
},
{
"name": "Download",
"id": "3.2"
}
]
},
{
"data4": [
{
"name": "Download",
"id": "4.1.1"
},
{
"name": "Download",
"id": "4.1.2"
}
]
}
]
HTML:
<table border="0" class="table table-bordered">
<tbody ng-repeat="(key,result) in results">
<tr ng-repeat="r in result['data'+[key+1]]">
<td rowspan="5">{{r.id}}</td>
</tr>
</tbody>
</table>
using ng-repeat to display each id in single cell of the table.
Actual Result:
Expected Result
Because of ng-repeat the cell are displaying next to each other. The expected result is to divide the table cell using the decimal points.
Example:
Row1 => 1.1.1, 1.1.2, 1.2, 1.3, 1.4
Row2 => 2.1, 2.2
The Row2 first cell(2.1) should take the width of row1(1.1.1 and 1.1.2). And 2.2 should take the rest of the width of 1.2, 1.3 and 1.4
Thanks in advance.
your data structure not clear, seems need to review and refactor it.
but for now this plunker can help you. (i hope!)
link:
plunker
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;
});
}
})();
I am GETing a nested JSON object that I want to render on a HTML page. The length and content of the object can vary and I want to show a part of it. I do not know how to do it using Mustache.js
My object looks like this:
{ "success": [
{
"stopID": "123",
"stopName": "ABC",
"lines": [
{
"lineRef": "3",
"destinationID": "987",
"destinationName": "DEF",
"arrivals": [
1490279520000,
1490279460000,
1490280180000
]
}
]
},
{
"stopID": "331",
"stopName": "TVC",
"lines": [
{
"lineRef": "3",
"destinationID": "128",
"destinationName": "NJH",
"arrivals": [
1490279160000,
1490280180000
]
},
{
"lineRef": "3V",
"destinationID": "361",
"destinationName": "KOI",
"arrivals": [
1490280360000
]
}
]
},
{
"stopID": "3601",
"stopName": "LKG",
"lines": [
{
"lineRef": "3",
"destinationID": "128",
"destinationName": "ABC",
"arrivals": [
1490279040000,
1490280360000,
1490280180000,
1490280180000
]
}
]
}
]}
I want to display maximum of two arrivals, how can I put a limit there.
I found this but it is not much help. My code is like this:
<script id="#timetables" type="text/template">
{{#success}}
<tr style = "">
<th colspan="3" style="padding-left:25px;">{{stopName}}<span><sup style="padding-left:5px;font-weight:100"><small>{{stopID}}</sup></span></th>
</tr>
{{#lines}}
<tr class="line-row">
<td class="" style="border:none;width:10%;">{{lineRef}}</td>
<td class="" style="border:none;width:30%;">{{destinationName}}</td>
<td class="" style="border:none;width:60%;">{{arrivals}}</td>
</tr>
{{/lines}}
{{/success}}
</script>
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>
So I have this on my JSON file:
[{
"title": "Secondary Containment",
"products": {
"product": [
{
"id": "1001",
"name": "one"
},
{
"id": "1002",
"name": "two"
},
{
"id": "1003",
"name": "three"
}
]
}
}, {
"title": "Another Title",
"products": {
"product": [
{
"id": "1011",
"name": "alpha"
},
{
"id": "1012",
"name": "beta"
},
{
"id": "1013",
"name": "gamma"
}
]
}
}]
What would I include in my ng-repeat to repeat the id's of the products in a list?
I have ng-repeat="category in categories" in my outer container which is repeating the different titles {{category.title}} but it's not repeating the inner array and nothing shows up when i try outputting {{category.products.product.id}}
Any ideas?
You need nested ng-repeat
<div ng-repeat="category in categories">
<div ng-repeat="product in category.products.product">
{{product.id}}
</div>
</div>
Your html should be
<div data-ng-repeat="category in categories">
<div data-ng-repeat="product in category.products.product">
{{product.id}}
</div>
</div>
You can do as nikhil said. But you need nested ng-repeat. But I personally suggest to use data-ng-repeat instead ng-repeat. The only main reason to use data-ng-* is The data-ng-* allows the HTML to be validated through validators that do not understand Angular