What i want to achieve is use the JSON details and populate the html table with 2 rows of 3 records.
My html file is as follows
<!DOCTYPE html>
<head>
<title>DETAILS</title>
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="js/main.js"></script>
</head>
<body ng-app="pr_app">
<h2>DETAILS</h2>
<div ng-controller="view_controller as view1">
<table>
<thead>
<caption> PR DETAILS </caption>
</thead>
<tbody>
<tr>
<th>Product</th>
<th>Quantity</th>
<th>Owner</th>
</tr>
<tr ng-repeat="items in view1.values">
<td>{{ items }}</td>
</tr>
</tbody>
</table>
</div>
</body>
MY JS file that houses the module and controller are as follows. NOTE: My first console.log() statement logs "(2) [Object, Object]" which means i am getting the response from my JSON file but the second console.log() gives me '6 undefined' so I cannot access the values of properties in my JSON array.
Can anyone point me is my JSON wrong or my http.get is doing something unexpected or anything else is wrong?
var app = angular.module("pr_app",[]);
app.controller("view_controller",['$http', function($http){
var self = this;
var record=[] , values=[];
$http.get('js/details.json').then(function(res){
self.record = res.data;
console.log(self.record);
for(var i = 0; i< self.record.length; i++)
{
for(var key in self.record[i])
{
self.values = record[key];
console.log(self.values);
}
}
}, function(){
console.log("Something went wrong");
})
}]);
And my JSON is as below :
[
{
"product": "Adobe",
"quantity": "1",
"owner": "ABC"
},
{
"product": "Adobe",
"quantity": "1",
"owner": "XYZ"
}
]
