I have been stuck on displaying data with ng-repeat. the only thing I have been able to do is display the one of the two objects. Every Customer can have multiple Users. I am trying to display the Users in a table with there CustomerId.
Working plunkr
app.controller('MainCtrl', function ($scope) {
var json = [
{
"CustomerId": "12xsd-344-fv23", "CompanyName": "ConocoPhillips",
"Address": "1234 Main St", "City": "Redmond", "State": "WA", "Zip": "10999",
"Email": "debra#example.com",
"Users": [
{
"FirstName": "Rudy", "LastName": "Sanchez", "CustomerId": "12xsd-344-fv23", "Customer": null,
"Email": "admin#energy.com", "EmailConfirmed": true, "PasswordHash": "AGtuCXr",
"SecurityStamp": "b0fca140", "PhoneNumber": null, "PhoneNumberConfirmed": false, "TwoFactorEnabled": false,
"LockoutEndDateUtc": null, "LockoutEnabled": false, "AccessFailedCount": 0, "Roles": [], "Claims": [], "Logins": [],
"Id": "49b5", "UserName": "admin"
},
{
"FirstName": "Troy", "LastName": "Benbow", "CustomerId": "12xsd-344-fv23", "Customer": null,
"Email": "tbenbow#yahoo.com", "EmailConfirmed": true, "PasswordHash": "AM8wL+iHaSG",
"SecurityStamp": "14f1483a-2e6f-41da-8307-a6c5945984a9", "PhoneNumber": null, "PhoneNumberConfirmed": false, "TwoFactorEnabled": false,
"LockoutEndDateUtc": null, "LockoutEnabled": true, "AccessFailedCount": 0, "Roles": [], "Claims": [], "Logins": [],
"Id": "9985b820-a45", "UserName": "tbenbow"
}
]
},
];
$scope.customers = json;
});
Since, CustomerId is also a property of User, you could make a list of Users in the controller and then loop them in the table:
$scope.users = [];
for(var i = 0; i < $scope.customers.length; i++) {
for(var j = 0; j < $scope.customers[i].Users.length; j++) {
//now you have access to customer properties with $scope.customers[i]
var user = $scope.customers[i].Users[j];
//example of adding CompanyName property
user.CompanyName = $scope.customers[i].CompanyName;
//add user to $scope.users
$scope.users.push(user);
}
}
And then just ng-repeat the users:
<tr ng-repeat="user in users">
<td>{{user.FirstName}} {{user.LastName}}</td>
<td>{{user.UserName}}</td>
<td>{{user.Email}}</td>
<td>{{user.CustomerId}}</td>
<td>{{user.CustomerName}}</td>
</tr>
Here is an updated plunker.
In fact, even if you need a property on the parent Customer part of json, you can add the property to the users array being repeated.
Preparing the data for view will often simplify template tricks (like having to build the table with extra ng-repeated elements. IMO, this is preferable.
There are two possible solutions for this problem, the first one ( rearranging your data in your controller) has already been mentioned in the other answer.
Another way would be a nested loop which I implemented like this:
<!doctype html>
<html ng-app="plunker" >
<head>
<meta charset="utf-8">
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css">
<script src="http://code.angularjs.org/1.1.4/angular.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<table class="table table-bordered">
<thead>
<tr>
<th>Name</th>
<th>UserName</th>
<th>Email</th>
<th>CustomerId</th>
</tr>
</thead>
<tbody ng-repeat="customer in customers">
<tr ng-repeat="user in customer.Users">
<td>{{user.FirstName}} {{user.LastName}} {{customer.CustomerId}}</td>
<td>{{user.UserName}}</td>
<td>{{user.Email}}</td>
<td>{{user.CustomerId}}</td>
</tr>
</tbody>
</table>
</body>
</html>
This solution is fast and easy to implement and gives you access to both the user and customer. I would still suggest to rebuild your data in your controller most of the time as it keeps your views clean and keeps any real logic in your controller (Check here for an example of that).
But this example is so simple that you can easily handle it in a nested ng-repeat.
Related
How to output response of type atom/xml feed (from arxiv call) into Jquery DataTable?
I have the datatable working for a simple json from Ajax call to flask server example.
When i try to do it with the xml from an arxiv api response, i cant seem to get it to display in the datatable (though i can just print the raw xml using <pre lang="xml" > or json).
I also tried to convert to json first via python dictionary, but still couldnt get it formatted into datatable as im unsure how to access the properties properly in the Ajax call when theyre deeper than the first level as in the basic example linked.
The HTML in template:
<table id="arxivtable" class="display" style="width:100%">
<thead>
<tr>
<th>title</th>
<th>id</th>
<th>link</th>
<th>author</th>
<th>published</th>
</tr>
</thead>
</table>
I tried via xml :
$('#arxivtable').DataTable({
"ajax": {
// "url": "static/objects2.txt", // This works for the static file
"url": "/get_arxivpapers", // This now works too thanks to #kthorngren
"dataType": "xml",
"type":"GET",
"dataSrc": "{{name}}",
"contentType":"application/atom+xml"
},
"columns": [
{"data": "title"},
{
"data": "link",
"render": function(data, type, row, meta){
if(type === 'display'){
data = '' + data + '';
}
return data;
}
},
{ "data": "id" },
{ "data": "link" },
{ "data": "author" },
{ "data": "journal" },
{ "data": "published" },
{ "data": "summary" }
]
});
JSON from AJAX call:
{
"feed": {
"#xmlns": "http://www.w3.org/2005/Atom",
"link": {
"#href": "http://arxiv.org/api/query?search_query%3Dall%3Aeinstein%26id_list%3D%26start%3D0%26max_results%3D2",
"#rel": "self",
"#type": "application/atom+xml"
},
"title": {
"#type": "html",
"#text": "ArXiv Query: search_query=all:einstein&id_list=&start=0&max_results=2"
},
"id": "http://arxiv.org/api/vehKAQR+bheXtHwJw3qx/OG/XXw",
"updated": "2022-06-14T00:00:00-04:00",
"opensearch:totalResults": {
"#xmlns:opensearch": "http://a9.com/-/spec/opensearch/1.1/",
"#text": "36970"
},
"opensearch:startIndex": {
"#xmlns:opensearch": "http://a9.com/-/spec/opensearch/1.1/",
"#text": "0"
},
"opensearch:itemsPerPage": {
"#xmlns:opensearch": "http://a9.com/-/spec/opensearch/1.1/",
"#text": "2"
},
"entry": [
{
"id": "http://arxiv.org/abs/1801.05533v2",
"updated": "2018-11-22T14:04:43Z",
"published": "2018-01-17T03:05:51Z",
"title": "Einstein-Weyl structures on almost cosymplectic manifolds",
"summary": "",
"author": {
"name": "Xiaomin Chen"
},
"arxiv:comment": {
"#xmlns:arxiv": "http://arxiv.org/schemas/atom",
"#text": "accepted by Periodica Mathematica Hungarica, 14 pages, no figures"
},
"link": [
{
"#href": "http://arxiv.org/abs/1801.05533v2",
"#rel": "alternate",
"#type": "text/html"
},
{
"#title": "pdf",
"#href": "http://arxiv.org/pdf/1801.05533v2",
"#rel": "related",
"#type": "application/pdf"
}
],
"arxiv:primary_category": {
"#xmlns:arxiv": "http://arxiv.org/schemas/atom",
"#term": "math.DG",
"#scheme": "http://arxiv.org/schemas/atom"
},
"category": [
{
"#term": "math.DG",
"#scheme": "http://arxiv.org/schemas/atom"
},
{
"#term": "53D10, 53D15",
"#scheme": "http://arxiv.org/schemas/atom"
}
]
},
{
"id": "http://arxiv.org/abs/0802.2137v3",
"updated": "2008-04-01T04:36:21Z",
"published": "2008-02-15T04:40:56Z",
"title": "",
"summary": ".",
"author": {
"name": ""
},
"arxiv:comment": {
"#xmlns:arxiv": "http://arxiv.org/schemas/atom",
"#text": "18 pages, added Theorem 5"
},
"link": [
{
"#href": "http://arxiv.org/abs/0802.2137v3",
"#rel": "alternate",
"#type": "text/html"
},
{
"#title": "pdf",
"#href": "http://arxiv.org/pdf/0802.2137v3",
"#rel": "related",
"#type": "application/pdf"
}
],
"arxiv:primary_category": {
"#xmlns:arxiv": "http://arxiv.org/schemas/atom",
"#term": "math.DG",
"#scheme": "http://arxiv.org/schemas/atom"
},
"category": [
{
"#term": "math.DG",
"#scheme": "http://arxiv.org/schemas/atom"
},
{
"#term": "53C30; 53C25",
"#scheme": "http://arxiv.org/schemas/atom"
}
]
}
]
}
}
Or the original atom/xml:
<feed xmlns="http://www.w3.org/2005/Atom">
<link href="http://arxiv.org/api/query?search_query%3Dall%3Aeinstein%26id_list%3D%26start%3D0%26max_results%3D2" rel="self" type="application/atom+xml">
<title type="html">ArXiv Query: search_query=all:einstein&id_list=&start=0&max_results=2</title>
<id>http://arxiv.org/api/vehKAQR+bheXtHwJw3qx/OG/XXw</id>
<updated>2022-06-14T00:00:00-04:00</updated>
<opensearch:totalresults xmlns:opensearch="http://a9.com/-/spec/opensearch/1.1/">36970</opensearch:totalresults>
<opensearch:startindex xmlns:opensearch="http://a9.com/-/spec/opensearch/1.1/">0</opensearch:startindex>
<opensearch:itemsperpage xmlns:opensearch="http://a9.com/-/spec/opensearch/1.1/">2</opensearch:itemsperpage>
<entry>
<id>http://arxiv.org/abs/1801.05533v2</id>
<updated>2018-11-22T14:04:43Z</updated>
<published>2018-01-17T03:05:51Z</published>
<title></title>
<summary>
</summary>
<author>
<name></name>
</author>
<arxiv:comment xmlns:arxiv="http://arxiv.org/schemas/atom">accepted by Periodica Mathematica Hungarica, 14 pages, no figures</arxiv:comment>
<link href="http://arxiv.org/abs/1801.05533v2" rel="alternate" type="text/html">
<link title="pdf" href="http://arxiv.org/pdf/1801.05533v2" rel="related" type="application/pdf">
<arxiv:primary_category xmlns:arxiv="http://arxiv.org/schemas/atom" term="math.DG" scheme="http://arxiv.org/schemas/atom">
<category term="math.DG" scheme="http://arxiv.org/schemas/atom">
<category term="53D10, 53D15" scheme="http://arxiv.org/schemas/atom">
</category></category></arxiv:primary_category></entry>
<entry>
<id>http://arxiv.org/abs/0802.2137v3</id>
<updated>2008-04-01T04:36:21Z</updated>
<published>2008-02-15T04:40:56Z</published>
<title></title>
<summary>
</summary>
<author>
<name></name>
</author>
<arxiv:comment xmlns:arxiv="http://arxiv.org/schemas/atom"></arxiv:comment>
<link href="http://arxiv.org/abs/0802.2137v3" rel="alternate" type="text/html">
<link title="pdf" href="http://arxiv.org/pdf/0802.2137v3" rel="related" type="application/pdf">
<arxiv:primary_category xmlns:arxiv="http://arxiv.org/schemas/atom" term="math.DG" scheme="http://arxiv.org/schemas/atom">
<category term="math.DG" scheme="http://arxiv.org/schemas/atom">
<category term="53C30; 53C25" scheme="http://arxiv.org/schemas/atom">
</category></category></arxiv:primary_category></entry>
</feed>
The End Point:
#app.route('/get_arxivpapers')
def getArxivPapers(name="einstein"):
max_results = 2
searchterm = name.replace("_", " ")
url = 'http://export.arxiv.org/api/query?search_query=all:' + searchterm + '&start=0&' + 'max_results='+ str(max_results)
data = urllib.request.urlopen(url)
# data_dict = xmltodict.parse(data)
# json_data = json.dumps(data_dict)
# print(json_data)
# return jsonify(json_data)
return data.read().decode('utf-8')
I will use your JSON source data instead of the XML, since that is easier to handle in DataTables.
Here is a basic demo, to start with, followed by some explanatory notes:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
</head>
<body>
<div style="margin: 20px;">
<table id="arxivtable" class="display" style="width:100%">
<thead>
<tr>
<th>title</th>
<th>id</th>
<th>link</th>
<th>author</th>
<th>published</th>
<th>summary</th>
</tr>
</thead>
</table>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#arxivtable').DataTable({
"ajax": {
url: "YOUR_URL_GOES_HERE",
dataSrc: "feed.entry"
},
"columns": [
{"data": "title"},
{ "data": "id" },
{ "data": "link[].#href" },
{ "data": "author.name" },
{ "data": "published" },
{ "data": "summary" }
]
});
});
</script>
</body>
</html>
Notes
1 - Because you have provided hard-coded HTML column headers, you need to make sure the number of those headers matches the number of columns defined in the DataTable. Alternatively, you can remove the HTML <thead> section and use the DataTables columns.title option.
2 - Your Ajax JSON source data contains an array [ ... ]. DataTables needs to know where this array is located in your JSON response, as part of the Ajax handling option, so that it can iterate over that array. Each element in the array will be used to create a row of HTML table data. The ajax.dataSrc option therefore needs to be set accordingly:
dataSrc: "feed.entry"
Once you have set the above Ajax JSON starting point correctly, then you can use field names for each separate column data value - as shown below.
3 - The author JSON value is actually an object:
"author": {
"name": "Xiaomin Chen"
},
Therefore you need to drill down into that to get the field you want to show in the DataTable:
{ "data": "author.name" },
4 - I removed your column renderer function to keep my initial demo simple, but it can be used to access fields and sub-fields - and concatenate strings and other values as needed (as in your example in the question).
5 - The link JSON value is actually an array of objects. For my basic demo, I just accessed the final entry in that array, and then took the href field:
{ "data": "link[].#href" },
This may not be what you want. You may want to only choose links of a certain type, or choose all links, or something different.
This is where DataTables is limited in what it can handle. It cannot display arbitrary nested JSON values of this type (not surprisingly).
In such cases, you would need to re-structure the JSON, prior to sending it to DataTables - or restructure it in a dataSrc function inside DataTables itself:
"dataSrc": function ( json ) { ...transform and return your JSON here... }
6 - I was not sure what you wanted to display for { "data": "journal" }. I did not see anything called journal in the JSON.
7 - Note that all the source JSON data outside of the feed.entry array is also not available to DataTables. DataTables can only iterate over that outer array. Anything you may also need which is not in that outer array would need to be added to the array, to be accessible to DataTables.
See also Nested object data (arrays) and Nested object data (objects) for more related notes.
I'm working on a chemicals database web application. Using DataTables 1.10.16 and CakePHP 3.5
Cake is producing a JSON feed. A sample is below:
[
{
"id": 1,
"app_id": "ID000001",
"name": "Chromium",
"ecs": [
{
"id": 1,
"value": "123-456-7"
},
{
"id": 32,
"value": "222-333-444"
},
],
"cas": [
{
"id": 1,
"value": "987-654-3"
}
]
},
]
For certain chemicals there are multiple EC (ecs in the JSON) and CAS Numbers (cas in the JSON).
I don't know if/how it's possible to get DataTables to loop through these objects, outputting them in the appropriate columns, with a separator such as a <br> tag.
My table markup looks like this:
<table id="substancesTable" class="table responsive display table-striped" cellspacing="0" width="100%">
<thead>
<tr>
<th>Application ID</th>
<th>EC Number</th>
<th>CAS Number</th>
<th>Chemical Name</th>
</tr>
</thead>
</table>
And in my Javascript I'm doing this:
$('#substancesTable').DataTable({
"processing": true,
"serverSide": true,
"searching": false,
"ajax": {
"url" : "/get-substances.json",
"method" : "POST",
"dataSrc":""
},
"columns": [
{ "data": "app_id", "name" : "app_id" },
{ "data": "ecs", "name" : "ec_number" },
{ "data": "cas", "name" : "cas_number" },
{ "data": "name", "name" : "name" },
]
});
This works in terms of populating the "Application ID" and "Chemical Name" columns - but that's because there is a simple 1:1 mapping in the JSON (no arrays/objects).
The output for the "EC Number" and "CAS Number" columns is just [object Object] and is repeated the number of objects there are. In the example above there are 2 EC Numbers for this chemical so the output under "EC Number" is [object Object],[object Object]
Can anyone assist with this? I'd like the output to be generated by looping through my JSON and introducing a break between each item, e.g.
123-456-7<br>222-333-444
You'll be needing a render function like this:
{
"data": "ecs",
"name": "ec_number",
"title":"EC Number",
"render": function(d,t,r){
return d.map(function(e) {
return e.value;
}).join("<br/>");
}
}
Working JSFiddle here.
I am using MEAN stack in my application with AngularJS as my front-end. How can I remove Square Brackets [] and Double quotes "" in repeated answer, My plunker actually we need show role vlaues in my app so we have used ng-repeat="mani in name.comments " to get the answer, and we got the answer like ["user"], ["admin"], ["kp"] , what we exactly looking we just need to show the values alone, not with the [] Square Brackets and Double quotes.... for example answer would be:- values are without in [] Square Brackets and Double quotes like 1. user , 2. admin, 3. kp
My Data:-
$scope.name = {
"_id": "5863d3aaacaeddc00663bc07",
"comments": [
{
"created": 1485511936350,
"role": [
"user"
],
"email": "selvam#e21designs.com",
"name": "selvam R",
"commentText": "mani selvam"
},
{
"created": 1485511936350,
"role": [
"admin"
],
"email": "selvam#e21designs.com",
"name": "selvam R",
"commentText": "mani selvam"
},
{
"created": 1485511936350,
"role": [
"kp"
],
"email": "selvam#e21designs.com",
"name": "selvam R",
"commentText": "mani selvam"
}
],
"created": "2016-12-28T15:00:58.777Z",
"isCurrentUserOwner": false
};
My Html:-
<div ng-repeat="mani in name.comments ">
<td>{{$index + 1}}</td>
<td>{{mani.role }}</td>
</div>
Please look at into My plunker for reference ...
Expecting answer would be without [] Square Brackets and Double quotes...
This role are within the array so that only it's showing with [] Square Brackets and Double quotes , so how can we remove this , we need to show only values... we have tried many ways we know it's simple task but we unable to solve this issue..
can we use css to remove this ?... any one knows the solution please help us... thanks
please update plunker as well to know the exact solution....
You can use the toString() method to convert the array that is being displayed to a string. Like so:
<td>{{mani.role.toString()}}</td>
That will display it as a string so the " and [] will be removed.
Plunkr showing this.
You just need to select the first element of the array at index 0 using:
{{ mani.role[0] }}
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = {
"_id": "5863d3aaacaeddc00663bc07",
"comments": [{
"created": 1485511936350,
"role": [
"user"
],
"email": "selvam#e21designs.com",
"name": "selvam R",
"commentText": "mani selvam"
}, {
"created": 1485511936350,
"role": [
"admin"
],
"email": "selvam#e21designs.com",
"name": "selvam R",
"commentText": "mani selvam"
}, {
"created": 1485511936350,
"role": [
"kp"
],
"email": "selvam#e21designs.com",
"name": "selvam R",
"commentText": "mani selvam"
}],
"created": "2016-12-28T15:00:58.777Z",
"isCurrentUserOwner": false
};
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular.min.js" data-semver="1.5.10"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div ng-repeat="mani in name.comments ">
<td>{{$index + 1}}</td>
<td>{{ mani.role[0] }}</td>
</div>
</body>
</html>
Your mani.role is an array, so do something like this:
<td><span ng-repeat="r in mani.role">{{ r }} </span></td>
Your data looks like Json data, so what you need is to read Json data through AngularJS by creating module like this:
var App = angular.module('App', []);
App.controller('Ctrl', function($scope, $http) {
$http.get('data.json')
.then(function(res){
$scope.data = res.data;
});
});
Also, w3schools helpful in your case $http in AngularJS
I'm trying to display three data tables as shown on this page with the variant of getting the data from my database, as shown here.
I first tested the page with the static data (from arrays.txt - first link) and it worked fine. However I'm now struggling with the MYSQL data and the JSON.
An info message showing "Processing..." shows up but the tables stay empty.
My Javascript:
$(document).ready(function(){
$('a[data-toggle="tab"]').on( 'shown.bs.tab', function (e) {
$.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust();
} );
$('table.table').DataTable( {
"processing": true,
"serverSide": true,
"ajax": {
"dataSrc": "Data", // Tried adding this but didn't help
"url": "/hireStaffController/getDataTable",
"type": "POST"
},
"columns": [
{ "data": "id_staff" },
{ "data": "name_english" },
{ "data": "name_french" },
{ "data": "position" },
{ "data": "efficiency" },
{ "data": "salary" }
]
} );
}
My controller:
public function getDataTable(){
$data = $this->staffModel->get_all_staff_DB();
echo json_encode($data);
}
My Model:
public function get_all_staff_DB(){
$query = $this->db
->select('*')
->from('game_staff')
->get();
return $query->result();
}
The JSON Response from Firebug seems correct:
[{
"id_staff": "1",
"name_english": "Ski patrol 1",
"name_french": "Pisteur secouriste 1",
"position": "skipatrol",
"efficiency": "50",
"salary": "1500"
}, {
"id_staff": "10",
"name_english": "Bus driver 2",
"name_french": "Chauffeur de bus 2",
"position": "driver",
"efficiency": "55",
"salary": "1380"
}]
Firebug throws this error:
TypeError: c is undefined
...iRecordsDisplay=parseInt(f,10);d=0;for(e=c.length;d<e;d++)N(a,c[d]);a.aiDisplay=...
^
So I've tried to add "dataSrc": "Data", in the Ajax, as described here but no luck, same error. WHat is this Data? I tried with a small "d" as well.
Can you see what is wrong?
My HTML code:
<div class="tab-pane active" id="tab-table1">
<table id="myTable1" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
</table>
</div>
<div class="tab-pane" id="tab-table2">
<table id="myTable2" class="table table-striped table-bordered" cellspacing="0" width="100%">
//same ...
</table>
</div>
try including "Data" as key to the echoed data:
public function getDataTable(){
$data = $this->staffModel->get_all_staff_DB();
echo json_encode(array('Data' => $data));
}
When you specify dataSrc as "Data", datatables looks for a "Data" property in the json returned by the ajax call, and uses that property as source for the table.
I hope the HTML table with is present there.
Try using ID instead of class.
Everything else you have done looks fine.
$('#ID').DataTable( {
"processing": true,
"serverSide": true,
"ajax": {
"url": "/hireStaffController/getDataTable",
"type": "POST"
},
"columns": [
{ "data": "id_staff" },
{ "data": "name_english" },
{ "data": "name_french" },
{ "data": "position" },
{ "data": "efficiency" },
{ "data": "salary" }
]
} );
I am using KnockoutJS for a web page. I created a JSON object to mimic values from server. Each time I run the page I get an empty record. Am I missing something?
var data ={ "employee": [{
"SiteId": 9,
"SystemId": 1,
"SystemName": "Glocus",
"ManualLink": "http://www.Glocus.com/Guide",
"ContactNo": "301-489-8989",
"UserAccount": [{
"AccountId": 1,
"AccountName": "Sisij",
"AccountType": "Customer System",
"Username": "Tybeke"
"Password": "*****",
}, {
"AccountId": 2,
"AccountName": "gabid",
"AccountType": "System System",
"Username": "Tybeke"
"Password": "*****",
}]
}, {
"SiteId": "1",
"SystemId": 1,
"SystemName": "TheSecondWorld",
"ManualLink": "http://www.TheSecondWorld.com/Guideplan",
"ContactNo": "301-489-8989",
"UserAccount": [{
"AccountId": 1,
"AccountName": "Uniqex",
"AccountType": "Customer System",
"Username": "TUniqux"
"Password": "*****",
}, {
"AccountId": 2,
"AccountName": "Celind",
"AccountType": "System System",
"Username": "GCElinds"
"Password": "*****",
}]
}]};
var ViewModel = function () {
var self = this;
var hello = ko.mapping.fromJS(data);
self.items = ko.observableArray(hello);
};
ko.applyBindings(new ViewModel());
Here is my knockoutJS Html code:
<div>
<span>Account</span>
<hr/>
<table>
<thead>
<tr>
<th>System Name</th>
<th>Manual link</th>
<th>Contact No</th>
</tr>
</thead>
<tbody data-bind="foreach: items.employee">
<tr>
<td data-bind="text :SystemName"></td>
<td data-bind="text : ManualLink"></td>
<td data-bind="text : ContactNo "></td>
</tr>
</tbody>
</table>
<hr/>
</div>
I have wasted so much time trying to get it right. Any help will be appreciated.
ko.mapping is used to create viewmodels. So you wouldn't actually nest view models in this case; you would just use the JSON to create one:
viewModel = ko.mapping.fromJS(data);
ko.applyBindings(viewModel);
http://jsfiddle.net/32765/1/