In Angular, I am trying to create a table that has collapsible detail rows. I had a sample of this working with a stack of row panels for the master details,which contained collapsible tables if are details for the master. I am attempting to modify the code to use tables for the master data, and tables for details data as well. However, I can't get it to open or collapse properly.
I have a very simple plunker file to demonstrate what I have:
http://plnkr.co/9ma3FnuzCrYJp72dqQXx?p=info
I believe its a problem with the HTML, I am trying to test with ng-repeat in different places, such as at a div or tr, but I am not too familiar with angular. Could anyone point out what I am doing wrong? I am trying the following:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="app">
<head>
<title></title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="../css/customizedbs.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div data-ng-controller="homeController">
<div class="container">
<table class="table table-striped">
<tr class="row">
<th>ID</th>
<th>Name</th>
</tr>
<tbody ng-repeat="product in products">
<tr>
<td>
<span class="handpointer glyphicon glyphicon-chevron-right" data-ng-click="collapse($event)" data-target="#view_{{product.productid}}" data-toggle="collapse" aria-expanded="false" data-ng-if="product.items!=null"></span>
</td>
<td> {{product.productid}}</td>
<td> {{product.productname}}</td>
</tr>
<div class="collapse" id="view_{{product.productid}}" data-ng-if="product.items!=null">
<div class="col-sm-offset-1">
<table class="table-condensed responsive-table">
<tr class="row">
<th>#ID</th>
<th>Item</th>
<th>Amount</th>
<th>Qty</th>
</tr>
<tr class="row" ng-repeat="item in product.items">
<td data-ng-bind="item.prodDetailId"></td>
<td data-ng-bind="item.prodDetailDesc"></td>
<td data-ng-bind="item.amount | currency"></td>
<td data-ng-bind="item.qty"></td>
</tr>
</table>
</div>
</div>
</tbody>
</table>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>
<script src="https://code.angularjs.org/1.3.11/angular-route.min.js"></script>
<script>
angular.module('app', [])
.controller('homeController', ['$scope', function($scope) {
$scope.collapse = function(event) {
$(event.target).toggleClass("glyphicon-chevron-down");
};
$scope.products = [{
"productid": 1001456,
"productname": "Spring Season Gift",
"amount": 250,
"orderDate": "2015-02-15T00:00:00Z",
"availablity": 1,
"items": [{
"prodDetailId": 17890,
"prodDetailDesc": "PS4",
"amount": "150",
"qty": 1
}, {
"prodDetailId": 17891,
"prodDetailDesc": "Heart Shaped Ring",
"amount": "100",
"qty": 1
}, ]
}, {
"productid": 1001457,
"productname": "Christmas Season Gift",
"amount": 349,
"orderDate": "2015-04-15T00:00:00Z",
"availablity": 1,
"items": [{
"prodDetailId": 17900,
"prodDetailDesc": "Chocolate Giftbox",
"amount": "150",
"qty": 1
}, {
"prodDetailId": 17901,
"prodDetailDesc": "Xbox 360",
"amount": "199",
"qty": 1
}, ]
}, {
"productid": 1001458,
"productname": "Birthday Gift",
"availablity": "N/A",
"amount": 200
}];
}]);
</script>
</body>
</html>
Your HTML structure was wrong.
You can't put a div inside a table directly..
You need to add a tr, then a td and then in it you add the div.
I have corrected your HTML structure please check .
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="app">
<head>
<title></title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="../css/customizedbs.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div data-ng-controller="homeController">
<div class="container">
<table class="table table-striped">
<tr class="row">
<th>ID</th>
<th>Name</th>
</tr>
<tbody ng-repeat="product in products">
<tr>
<td>
<a class="handpointer glyphicon glyphicon-chevron-right" data-ng-click="collapse($event)" data-ng-if="product.items!=null" role="button" data-toggle="collapse" href="#view_{{product.productid}}" aria-expanded="false">
</a>
</td>
<td> {{product.productid}}</td>
<td> {{product.productname}}</td>
</tr>
<tr class="collapse" id="view_{{product.productid}}" data-ng-if="product.items!=null">
<td colspan="3">
<div class="col-sm-offset-1">
<table class="table-condensed responsive-table">
<tr class="row">
<th>#ID</th>
<th>Item</th>
<th>Amount</th>
<th>Qty</th>
</tr>
<tr class="row" ng-repeat="item in product.items">
<td data-ng-bind="item.prodDetailId"></td>
<td data-ng-bind="item.prodDetailDesc"></td>
<td data-ng-bind="item.amount | currency"></td>
<td data-ng-bind="item.qty"></td>
</tr>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>
<script src="https://code.angularjs.org/1.3.11/angular-route.min.js"></script>
<script>
angular.module('app', [])
.controller('homeController', ['$scope', function($scope) {
$scope.collapse = function(event) {
$(event.target).toggleClass("glyphicon-chevron-down");
};
$scope.products = [{
"productid": 1001456,
"productname": "Spring Season Gift",
"amount": 250,
"orderDate": "2015-02-15T00:00:00Z",
"availablity": 1,
"items": [{
"prodDetailId": 17890,
"prodDetailDesc": "PS4",
"amount": "150",
"qty": 1
}, {
"prodDetailId": 17891,
"prodDetailDesc": "Heart Shaped Ring",
"amount": "100",
"qty": 1
}, ]
}, {
"productid": 1001457,
"productname": "Christmas Season Gift",
"amount": 349,
"orderDate": "2015-04-15T00:00:00Z",
"availablity": 1,
"items": [{
"prodDetailId": 17900,
"prodDetailDesc": "Chocolate Giftbox",
"amount": "150",
"qty": 1
}, {
"prodDetailId": 17901,
"prodDetailDesc": "Xbox 360",
"amount": "199",
"qty": 1
}, ]
}, {
"productid": 1001458,
"productname": "Birthday Gift",
"availablity": "N/A",
"amount": 200
}];
}]);
</script>
</body>
</html>
Updated plunker
Related
I am trying to create HTML table with dynamic tr and td.
I have added nested loops in the HTML itself , dynamic column headers(th) are working fine but values are not getting added in correct td.
Here is a data I have :
"finalResult": [
{
"tableNamee": "Table_1",
"colCategories": [
{
"columnnnn": "User",
"values": [
{
"value": "0"
},
{
"value": "10"
},
{
"value": "60"
},
{
"value": "0"
},
{
"value": "0"
},
{
"value": "0"
},
{
"value": "0"
},
{
"value": "0"
},
{
"value": "0"
}
]
},
{
"columnnnn": "Header1",
"values": [
{
"value": "460"
}
]
},
{
"columnnnn": "Amount",
"values": [
{
"value": "10"
},
{
"value": "100"
},
{
"value": "50"
}
]
}
]
},
{
"tableNamee": "Table_2",
"colCategories": [
{
"columnnnn": "User",
"values": [
{
"value": "07"
},
{
"value": "10"
}
]
},
{
"columnnnn": "Amount",
"values": [
{
"value": "70"
}
]
},
{
"columnnnn": "User1",
"values": [
{
"value": "57"
}
]
},
{
"columnnnn": "Column",
"values": [
{
"value": "80"
}
]
},
{
"columnnnn": "Column2",
"values": [
{
"value": "10"
}
]
}
]
}
]
And below is the html code for it :
<div *ngFor="let j of finalResult; index as i" class="">
<div class=""> <span title="{{j.tableNamee}}">Table Name : {{j.tableNamee}} </span>
</div>
<div class="">
<table class="table table-bordered">
<tbody>
<tr class="">
<th class="" scope="col" *ngFor="let k of j.colCategories">
{{k.columnnnn}}
</th>
</tr>
<ng-container *ngFor="let k of j.colCategories">
<tr class="">
<ng-container>
<div *ngFor="let m of k.values">
<td class="">
<div class=""> <span title="{{m.value}}"> {{m.value}} </span>
</div>
</td>
</div>
</ng-container>
</tr>
</ng-container>
</tbody>
</table>
</div>
</div>
There is no any specific ts code for this. I just manipulated data in above format and trying to apply loops in HTML itself. Am I doing anything wrong?
this is desired output :
desired output
and this is current output I am getting :
current output
Any help would be appreciated!
Your HTML markup looks weird in that your <tr> contains a <div> which wraps the <td>s. And I think that is what's causing your problem.
I have not tried this but may you can try changing your <table> markup to this:
<table class="table table-bordered">
<thead>
<tr class="">
<th class="" scope="col" *ngFor="let k of j.colCategories">
{{k.columnnnn}}
</th>
</tr>
</thead>
<tbody>
<tr class="" *ngFor="let k of j.colCategories">
<td class="" *ngFor="let m of k.values">
<div class="">
<span title="{{m.value}}"> {{m.value}} </span>
</div>
</td>
</tr>
</tbody>
</table>
I'm working on aligning a vegalite graph to the center of the webpage, but I've only been able to get it displaying on the left side.
I have two other graphs that I've been able to place right next to each other, but I'm pretty lost on how to center the first graph.
I'm looking to create something like this:
Graph 1
Graph 2 Graph 3
Here is what I have so far, and it is currently displayed like this:
Graph 1
Graph 2 Graph3
<table>
<thread>
<tr>
<th colspan="2">U.S. Gasoline Retail Prices</th>
</tr>
</thread>
<tr>
<td><div id="vis2" display="block"></div></td>
</tr>
</table>
<br><br>
<table>
<thread>
<tr>
<th colspan="1">Average Annual Consumer Price Index(CPI) for Gasoline</th>
<th colspan="2">Annual Crude Oil Price by Barrel(42 gallons)</th>
</tr>
</thread>
<tr>
<td><div id="vis3"></div></td>
<td><div id="vis4"></div></td>
</tr>
</table>
You can simply add style in your table as width: 100%; and in your div blocks you can use style="display: block;" where you are trying to display the vega chart. Also in your vega spec config, add width: 'container' which will keep the width size as per the parent container.
Refer the below snippet or fiddle:
var yourVlSpec = {
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "A simple bar chart with embedded data.",
"data": {
"values": [{
"a": "A",
"b": 28
}, {
"a": "B",
"b": 55
}, {
"a": "C",
"b": 43
},
{
"a": "D",
"b": 91
}, {
"a": "E",
"b": 81
}, {
"a": "F",
"b": 53
},
{
"a": "G",
"b": 19
}, {
"a": "H",
"b": 87
}, {
"a": "I",
"b": 52
}
]
},
"autosize2": {"contains": "padding", "resize": true, "type": "fit"},
width: 'container',
"mark": "bar",
"encoding": {
"x": {
"field": "a",
"type": "ordinal"
},
"y": {
"field": "b",
"type": "quantitative"
}
}
}
vegaEmbed("#vis2", yourVlSpec, {renderer: 'svg'}).then(res => {
var view = res.view;
//console.log(view.data('source_0'));
});
vegaEmbed("#vis3", yourVlSpec, {renderer: 'svg'}).then(res => {
var view = res.view;
//console.log(view.data('source_0'));
});
vegaEmbed("#vis4", yourVlSpec, {renderer: 'svg'}).then(res => {
var view = res.view;
//console.log(view.data('source_0'));
});
<script src="https://cdn.jsdelivr.net/npm/vega#5.20.2/build/vega.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite#5.0.0/build/vega-lite.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed#6.17.0/build/vega-embed.min.js"></script>
<table style="width: 100%;">
<thread>
<tr>
<th colspan="2">U.S. Gasoline Retail Prices</th>
</tr>
</thread>
<tr>
<td><div style="display: block;" id="vis2"></div></td>
</tr>
</table>
<br><br>
<table style="width: 100%;">>
<thread>
<tr>
<th colspan="1">Average Annual Consumer Price Index(CPI) for Gasoline</th>
<th colspan="2">Annual Crude Oil Price by Barrel(42 gallons)</th>
</tr>
</thread>
<tr>
<td><div style="display: block;" id="vis3"></div></td>
<td><div style="display: block;" id="vis4"></div></td>
</tr>
</table>
this is my json data:
{
"roleID": 1,
"roleName": "Admin",
"active": true,
"module": [
{
"moduleID": 6,
"moduleDescription": "Application",
"pageName": "Application",
"underModuleID": 0,
"subModules": [
{
"moduleID": 1,
"moduleDescription": "civil bill",
"pageName": "civil bill",
"underModuleID": 6,
"roleModulePermissions": [
{
"roleModuleAllocationID": 8,
"roleID": 1,
"moduleID": 1,
"moduleRead": true,
"moduleWrite": true,
"moduleCreate": false
}
]
}
]
}]}
i want to iterate through my object parameters, in the array roleModulePermissions i want to iterate parameters moduleRead,moduleWrite,moduleCreate such that i get a 3 checkbox inside a row which displays the values of this parameters how should i write html script to access the data like i specified.and i want the data to come in bootstrap row panel
You can created nested table and achieve this.
Here is the working snippet
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#3.0.0" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<link data-require="bootstrap#3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script data-require="angular.js#1.6.6" data-semver="1.6.6" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.min.js"></script>
<script>
(function() {
var app = angular.module("myApp", ['ui.bootstrap']);
app.controller('testCtrl', ['$scope', function($scope) {
$scope.roles = {
"roleID": 1,
"roleName": "Admin",
"active": true,
"module": [{
"moduleID": 6,
"moduleDescription": "Application",
"pageName": "Application",
"underModuleID": 0,
"subModules": [{
"moduleID": 1,
"moduleDescription": "civil bill",
"pageName": "civil bill",
"underModuleID": 6,
"roleModulePermissions": [{
"roleModuleAllocationID": 8,
"roleID": 1,
"moduleID": 1,
"moduleRead": true,
"moduleWrite": true,
"moduleCreate": false
}]
}]
}]
};
}]);
}());
</script>
<style></style>
</head>
<body ng-app="myApp">
<div ng-controller="testCtrl">
<table class="table">
<tr>
<th>Module</th>
<th>Sub Module</th>
</tr>>
<tr ng-repeat="module in roles.module">
<td col-span="2">{{module.pageName}}</td>
<td ng-repeat="submodule in module.subModules">
<table class="table">
<tr>
<td>{{submodule.pageName}}</td>
<td ng-repeat="permission in submodule.roleModulePermissions">
<div class="checkbox">
<label><input type="checkbox" ng-model="permission.moduleRead">Read</label>
</div>
<div class="checkbox">
<label><input type="checkbox" ng-model="permission.moduleWrite">Write</label>
</div>
<div class="checkbox">
<label><input type="checkbox" ng-model="permission.moduleCreate">Create</label>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<style type="text/css">
body {background-color: #D3D3D3;}
table {
width: 30%;
border-collapse: collapse;
}
td {
border: 1px solid black;
}
p.one {
border-style: solid;
border-width: 5px;
}
p.groove {border-style: groove;
height: 400px;
width: 400px;
}
</style>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
<script src="app.js"></script>
<script type="text/javascript">
var app = angular.module('app', []);
app.controller('ctrl', function($scope) {
$scope.categoryL = '';
$scope.categoryList = function(value) {
$scope.categoryL = value;
}
$scope.selectedCategory = {};
$scope.menus = [{
"Forms": [{
"title": "Book a Meeting Room",
"category": "Forms",
"url": "https://www.google.co.uk/",
},
{
"title": "Book a Pool Car",
"category": "Forms",
"url": "https://www.google.co.uk/"
},
{
"title": "Order Stationery",
"category": "Forms",
"url": "https://www.google.co.uk/"
},
{
"title": "Gift & Hospitality",
"category": "Forms",
"url": "https://www.google.co.uk/"
}]
}, {
"News": [{
"title": "Discovery Communications embraces Office 365",
"category": "News",
"url": "https://blogs.office.com/2016/07/18/discovery-communications-embraces-office-365-to-foster-creative-culture-of-innovation/"
},
{
"title": "Guardian Industries",
"category": "News",
"url": "https://blogs.office.com/2016/07/15/guardian-industries-connect-collaborate-and-innovate-from-anywhere/"
},
{
"title": "Data Loss Prevention Policy Tips in OneDrive",
"category": "News",
"url": "https://blogs.office.com/2016/07/14/data-loss-prevention-policy-tips-in-onedrive-mobile-apps/"
}]
},
{
"Useful Information": [{
"title": "Get started with SharePoint",
"category": "Useful Information",
"url": "https://support.office.com/en-us/article/Get-started-with-SharePoint-909ec2f0-05c8-4e92-8ad3-3f8b0b6cf261"
},
{
"title": "What is SharePoint?",
"category": "Useful Information",
"url": "https://support.office.com/en-us/article/What-is-SharePoint-97b915e6-651b-43b2-827d-fb25777f446f"
},
{
"title": "Accessibility features in SharePoint Online",
"category": "Useful Information",
"url": "https://support.office.com/en-us/article/Accessibility-features-in-SharePoint-Online-f291404a-dc7e-44de-a31f-d81b3099c2b9?ui=en-US&rs=en-US&ad=US"
},
{
"title": "Videos for SharePoint Online and SharePoint 2013",
"category": "Useful Information",
"url": "https://support.office.com/en-us/article/Videos-for-SharePoint-Online-and-SharePoint-2013-ed074945-4ddc-4479-9efe-6b3945cf8266?ui=en-US&rs=en-US&ad=US"
}]
}]
$scope.labels = [];
(function getMenuLabels() {
angular.forEach($scope.menus, function(menu) {
$scope.labels.push({
label: Object.keys(menu)[0],
moreInformation: menu[Object.keys(menu)[0]]
});
})
$scope.selectedCategory = $scope.labels[0];
})();
});
</script>
</head>
<body ng-app="app" ng-controller="ctrl">
<div class="center">
<center>
<p class="groove">
<select width="300" style="width:400px" ng-model="selectedCategory" ng-options="label.label for label in labels"></select>
<section class="categoryL">
<b ng-repeat="info in selectedCategory.moreInformation">
<br>
<table align="center" class="ex2" style="border:1px solid yellowgreen;">
<tr>
<td BGCOLOR="#ff00ff"><a ng-href="{{info.url}}">{{info.title}}</a></td>
</tr/>
</table>
</section>
</center>
</div>
</p>
</body>
</html>
Hi, if you load my code into a file you will see that i have added some CSS, however i am finding it difficult to add the links inside the border that i have created, i have managed to get the drop down inside the border but for some reason i can not add the links.
I don't know if I understand your question, but you can display title with another ng-repeat (I edited your first section) https://plnkr.co/edit/8ItCgNT4xPbpLnKbYawf?p=preview:
<section class="choices">
<div class="categories">
<ul>
<li ng-repeat="menu in menus">
<div ng-repeat="(key,val) in menu">
{{key}}
<div ng-repeat="titles in val">{{titles.title}}</div>
</div>
</li>
</ul>
</div>
Hi its kinda long to explain my problem but i will try,
I use Angular and I have that json in a file:
{
"users": [
{
"gender": "male",
"title": "mr",
"first": "francisco",
"last": "medina",
"street": "2748 w dallas st",
"city": "flowermound",
"state": "new jersey",
"zip": "77511",
"email": "francisco.medina65#example.com",
"dob": "454252284",
"phone": "(757)-889-2571",
"cell": "(113)-542-2123",
"picture": {
"large": "http://api.randomuser.me/portraits/men/22.jpg",
"thumbnail": "http://api.randomuser.me/portraits/thumb/men/22.jpg"
}
},
{
"gender": "female",
"title": "mrs",
"first": "sherry",
"last": "elliott",
"street": "3251 brown terrace",
"city": "wichita falls",
"state": "washington",
"zip": "79455",
"email": "sherry.elliott17#example.com",
"dob": "224238139",
"phone": "(225)-793-2067",
"cell": "(968)-555-1402",
"picture": {
"large": "http://api.randomuser.me/portraits/women/37.jpg",
"thumbnail": "http://api.randomuser.me/portraits/thumb/women/37.jpg"
}
},
{
"gender": "male",
"title": "mr",
"first": "johnny",
"last": "medina",
"street": "1313 samaritan dr",
"city": "redding",
"state": "new hampshire",
"zip": "43269",
"email": "johnny.medina76#example.com",
"dob": "259176886",
"phone": "(991)-957-7139",
"cell": "(502)-773-1487",
"picture": {
"large": "http://api.randomuser.me/portraits/men/90.jpg",
"thumbnail": "http://api.randomuser.me/portraits/thumb/men/90.jpg"
}
}
]
}
I make http request to get the json and build a table with the results the problem is that I have to access the thumbnail picture and when i do access it it retruns me undefined, so in my opinion there is need for another http request inside that I already have but I return from the first http request three objects, so i will probably (in my opinion as I said) will need three more http requests , this is my angular code:
<!DOCTYPE html>
<html ng-app="DemoApp">
<head lang="en">
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="https://code.angularjs.org/1.4.7/i18n/angular-locale_da.js"></script>
<style>
table,td{
border:1px solid black;
border-collapse:collapse;
padding:5px;
}
table tr:nth-child(even)
{
background-color:#ffffff;
}
table tr:nth-child(odd) {
background-color: #f1f1f1;
}
table th {
background-color: black;
color: white;
}
</style>
</head>
<body ng-controller="Controller as ctr">
<div class="container">
<div>
<div class="col-md-9">
<table class="table" id="orders">
<thead>
<tr>
<th>Index</th>
<th>picture</th>
<th>Name</th>
<th>Last Name</th>
<th>Details</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users.users ">
<td>{{$index+1}}</td>
<td>{{user.thumbnail}}</td>
<td>{{user.first }}</td>
<td>{{user.last}}</td>
<td>Details
<!-- <td>
edit
<button ng-click ="ctrl.deleteCar(car.id)" class="remove">X</button>
delete
</td>-->
</tr>
</tbody>
</table>
</div>
<div class="col-md-3" style="border: thin lightblue solid; border-radius: 5px;padding: 1em;">
</div>
</div>
</div>
<script>
var app = angular.module('DemoApp', []);
app.controller('Controller', function($http,$scope){
var self = this;
$scope.users=[];
$scope.photoTumbnails=[];
//var users=[];
$http({
method: 'GET',
url: 'data.json'
}).then(function successCallback(response)
{
$scope.users = response.data;
console.log("The data from the file is "+$scope.users.users)
console.log("The data from the file is "+$scope.users.users.thumbnail)
}, function errorCallback(response)
{
$scope.error = response.status + ": " + response.data.statusText;
});
});
</script>
</body>
</html>
So Can I get the image to be displayed
Change
<td>{{user.thumbnail}}</td>
to
<td><img ng-src="user.picture.thumbnail"/></td>