ng-repeat of JSON which have index on it - javascript

I have a json like this
{
"0": {
"Order_Id": "100000001",
"prodct_Status": "Pending",
"Price": "8.0000",
"date_created": "Jun 4, 2014 7:55:42 AM",
"Shipping_Address": "vbccv",
"Region": "Arizona",
"Country": "US"
},
"1": {
"Order_Id": "100000002",
"prodct_Status": "Pending",
"Price": "38.4600",
"date_created": "Jun 7, 2014 6:37:48 AM",
"Shipping_Address": "vbccv",
"Region": "Arizona",
"Country": "US"
},
"2": {
"Order_Id": "100000003",
"prodct_Status": "Pending",
"Price": "44.9200",
"date_created": "Jun 10, 2014 4:52:46 AM",
"Shipping_Address": "vbccv",
"Region": "Arizona",
"Country": "US"
}
}
I wanna do ng repeat in this json . I have those 0 1 index there which i can not remove .

you can use the standard ng-repeat syntax:
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<div ng-repeat="item in data">
{{item.Order_Id}}
{{item.Region}}
</div>
</body>
controller:
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.data = {
"0": {
"Order_Id": "100000001",
"prodct_Status": "Pending",
"Price": "8.0000",
"date_created": "Jun 4, 2014 7:55:42 AM",
"Shipping_Address": "vbccv",
"Region": "Arizona",
"Country": "US"
},
"1": {
"Order_Id": "100000002",
"prodct_Status": "Pending",
"Price": "38.4600",
"date_created": "Jun 7, 2014 6:37:48 AM",
"Shipping_Address": "vbccv",
"Region": "Arizona",
"Country": "US"
},
"2": {
"Order_Id": "100000003",
"prodct_Status": "Pending",
"Price": "44.9200",
"date_created": "Jun 10, 2014 4:52:46 AM",
"Shipping_Address": "vbccv",
"Region": "Arizona",
"Country": "US"
}
};
});
http://plnkr.co/edit/o7pQvhh2KKL7xgqhtL5L?p=preview

ng-repeat can iterate with objects as well:
<div ng-repeat="(index, order) in {'0':{'Order_Id':'1'},'1':{ 'Order_Id': '2'}}">
<span>{{ order.Order_Id }}</span>
</div>
In your case string index can be ignored. See also this answer.

Try it like this
var json = { /* your json goes here */ };
<ul>
<li ng-repeat="(key,value) in json">
{{key}} {{value.Price}}
</li>
</ul>
http://plnkr.co/edit/01vry4469ggGs1O1i5tI?p=preview

Related

Finding two values existing in same object array using javascript

I have an array with flight detail like from, to and cost of the tickets. I'm trying to show the flight details for particular from-to.
For example: if the user selects from as bangaluru and to as delhi then I should show the corresponding detail.I used set to have the print the unique values.Is there any way to check if from and to belongs to same object then it should show details of the object.
I tried the below, but it just checks the overall array.
if((flightDetails.includes(orginVal)) && (flightDetails.includes(destinationVal))){
alert("hello");
}
Js code:
flightDetails=[{
"airline": "B-201",
"from": "Bangaluru(BLR)",
"to": "Delhi(DEL)",
"detail": [{
"date": "2019-12-30",
"price": "3900",
"departTime": "12:00 PM",
"arriveTime": "14:00 PM",
"seats":"10"
}, {
"date": "2019-12-31",
"price": "3000",
"departTime": "17:30 PM",
"arriveTime": "19:30 PM",
"seats":"3"
}, {
"date": "2019-06-01",
"price": "2100",
"departTime": "09:00 AM",
"arriveTime": "11:00 AM",
"seats":"7"
}]
},{
"airline": "B-202",
"from": "Delhi(DEL)",
"to": "Bangaluru(BLR)",
"detail": [{
"date": "2019-12-30",
"price": "3000",
"departTime": "12:00 PM",
"arriveTime": "14:00 PM",
"seats":"10"
}, {
"date": "2019-12-31",
"price": "3000",
"departTime": "17:30 PM",
"arriveTime": "19:30 PM",
"seats":"3"
}, {
"date": "2019-06-01",
"price": "2100",
"departTime": "09:00 AM",
"arriveTime": "11:00 AM",
"seats":"7"
}]
}]
inputOrigin=document.getElementById('origin');
inputDesination= document.getElementById("desination");
originOptions=document.getElementById('originCountry');
destinationOptions= document.getElementById('desinationCountry');
var originCategories = new Set();
var destinationCategories = new Set();
flightDetails.forEach((o) => originCategories.add(o.from));
originCategories = [...originCategories];
flightDetails.forEach((o) => destinationCategories.add(o.to));
destinationCategories = [...destinationCategories];
for(i=0;i<originCategories.length;i++) {
originOptions.innerHTML+=' <option>'+originCategories[i]+'<option>';
}
for(i=0;i<destinationCategories.length;i++) {
destinationOptions.innerHTML+=' <option>'+destinationCategories[i]+'<option>';
}
You can use filter, which will return an array with matches. If you only expect one, you can of course pop that element out of it:
var flightDetails=[{"airline": "B-201","from": "Bangaluru(BLR)","to": "Delhi(DEL)","detail": [{"date": "2019-12-30","price": "3900","departTime": "12:00 PM","arriveTime": "14:00 PM","seats":"10"}, {"date": "2019-12-31","price": "3000","departTime": "17:30 PM","arriveTime": "19:30 PM","seats":"3"}, {"date": "2019-06-01","price": "2100","departTime": "09:00 AM","arriveTime": "11:00 AM","seats":"7"}]},{"airline": "B-202","from": "Delhi(DEL)","to": "Bangaluru(BLR)","detail": [{"date": "2019-12-30","price": "3000","departTime": "12:00 PM","arriveTime": "14:00 PM","seats":"10"}, {"date": "2019-12-31","price": "3000","departTime": "17:30 PM","arriveTime": "19:30 PM","seats":"3"}, {"date": "2019-06-01","price": "2100","departTime": "09:00 AM","arriveTime": "11:00 AM","seats":"7"}]}];
var originVal = "Delhi(DEL)";
var destinationVal = "Bangaluru(BLR)"
var matches = flightDetails.filter(detail => detail.from === originVal && detail.to === destinationVal);
console.log(matches);
As your existing code already collects the exact origins and destinations, from which the user makes a selection, I don't think it is useful to use includes. It will be more appropriate to look for exact matches.
filter will possibly return multiple results, so you should probably give the user a further selection possibility from that result list.
You're comparing a js object rather than the from-to strings.
Use the function find and check for each object the attributes from-to. This approach finds the first match and not the remaining matches, in that case, you can use the function filter instead.
I'm assuming the final user will write a string like originVal="Bangal" and destinationVal="Del"
let flightDetails = [{ "airline": "B-201", "from": "Bangaluru(BLR)", "to": "Delhi(DEL)", "detail": [{ "date": "2019-12-30", "price": "3900", "departTime": "12:00 PM", "arriveTime": "14:00 PM", "seats": "10" }, { "date": "2019-12-31", "price": "3000", "departTime": "17:30 PM", "arriveTime": "19:30 PM", "seats": "3" }, { "date": "2019-06-01", "price": "2100", "departTime": "09:00 AM", "arriveTime": "11:00 AM", "seats": "7" }]}, { "airline": "B-202", "from": "Delhi(DEL)", "to": "Bangaluru(BLR)", "detail": [{ "date": "2019-12-30", "price": "3000", "departTime": "12:00 PM", "arriveTime": "14:00 PM", "seats": "10" }, { "date": "2019-12-31", "price": "3000", "departTime": "17:30 PM", "arriveTime": "19:30 PM", "seats": "3" }, { "date": "2019-06-01", "price": "2100", "departTime": "09:00 AM", "arriveTime": "11:00 AM", "seats": "7" }]}],
originVal = "Bangaluru",
destinationVal = "Delhi",
found = flightDetails.find(({from, to}) => from.includes(originVal) && to.includes(destinationVal));
if (found) console.log(found.detail);
.as-console-wrapper { max-height: 100% !important; top: 0; }
You can take input and than find the object based on from and to property
let flightDetails = [{"airline":"B-201","from":"Bangaluru(BLR)","to":"Delhi(DEL)","detail":[{"date":"2019-12-30","price":"3900","departTime":"12:00PM","arriveTime":"14:00PM","seats":"10"},{"date":"2019-12-31","price":"3000","departTime":"17:30PM","arriveTime":"19:30PM","seats":"3"},{"date":"2019-06-01","price":"2100","departTime":"09:00AM","arriveTime":"11:00AM","seats":"7"}]},{"airline":"B-202","from":"Delhi(DEL)","to":"Bangaluru(BLR)","detail":[{"date":"2019-12-30","price":"3000","departTime":"12:00PM","arriveTime":"14:00PM","seats":"10"},{"date":"2019-12-31","price":"3000","departTime":"17:30PM","arriveTime":"19:30PM","seats":"3"},{"date":"2019-06-01","price":"2100","departTime":"09:00AM","arriveTime":"11:00AM","seats":"7"}]}]
function values(){
let fromIn = document.getElementById('from').value
let toIn = document.getElementById('to').value
let details = flightDetails.find(( {from,to} ) => from === fromIn && to === toIn)
console.log(details)
}
<input id='from' placeholder='From'></input>
<input id='to' placeHolder='To'></input>
<button onClick=values()>Give me details</button>

How to display nested JSON data using angularjs

I ma trying to call JSON file in Angular controller using below code, I spent 2 days on it but nothing works, please help
[{
"enquiry_data": {
"car_model": "images/mercedes-gla-class-primary.jpg",
"car_name": "gla-class",
"user_name": "sanjay",
"user_phone": "9874563210",
"status": "active",
"status_stage": "test drive given",
"date": "05 may 2017",
"time": "02:50 pm",
"timeline": {
"0": {
"status": "accepted",
"date": "15 may"
},
"1": {
"status": "follow up",
"date": "18 may"
},
"2": {
"status": "follow up",
"date": "20 may"
},
"3": {
"status": "next",
"date": "24 may"
}
}
}
}, {
"enquiry_data": {
"car_model": "images/mercedes-gla-class-primary.jpg",
"car_name": "gla-class",
"user_name": "sanjay",
"user_phone": "9874563210",
"status": "active",
"status_stage": "test drive given",
"date": "05 may 2017",
"time": "02:50 pm",
"timeline": {
"0": {
"status": "accepted",
"date": "15 may"
},
"1": {
"status": "follow up",
"date": "18 may"
},
"2": {
"status": "follow up",
"date": "20 may"
},
"3": {
"status": "next",
"date": "24 may"
}
}
}
}, {
"enquiry_data": {
"car_model": "images/mercedes-gla-class-primary.jpg",
"car_name": "gla-class",
"user_name": "sanjay",
"user_phone": "9874563210",
"status": "active",
"status_stage": "test drive given",
"date": "05 may 2017",
"time": "02:50 pm",
"timeline": {
"0": {
"status": "accepted",
"date": "15 may"
},
"1": {
"status": "follow up",
"date": "18 may"
},
"2": {
"status": "follow up",
"date": "20 may"
},
"3": {
"status": "next",
"date": "24 may"
}
}
}
}, {
"enquiry_data": {
"car_model": "images/mercedes-gla-class-primary.jpg",
"car_name": "gla-class",
"user_name": "sanjay",
"user_phone": "9874563210",
"status": "active",
"status_stage": "test drive given",
"date": "05 may 2017",
"time": "02:50 pm",
"timeline": {
"0": {
"status": "accepted",
"date": "15 may"
},
"1": {
"status": "follow up",
"date": "18 may"
},
"2": {
"status": "follow up",
"date": "20 may"
},
"3": {
"status": "next",
"date": "24 may"
}
}
}
}, {
"enquiry_data": {
"car_model": "images/mercedes-gla-class-primary.jpg",
"car_name": "gla-class",
"user_name": "sanjay",
"user_phone": "9874563210",
"status": "active",
"status_stage": "test drive given",
"date": "05 may 2017",
"time": "02:50 pm",
"timeline": {
"0": {
"status": "accepted",
"date": "15 may"
},
"1": {
"status": "follow up",
"date": "18 may"
},
"2": {
"status": "follow up",
"date": "20 may"
},
"3": {
"status": "next",
"date": "24 may"
}
}
}
}, {
"enquiry_data": {
"car_model": "images/mercedes-gla-class-primary.jpg",
"car_name": "gla-class",
"user_name": "sanjay",
"user_phone": "9874563210",
"status": "active",
"status_stage": "test drive given",
"date": "05 may 2017",
"time": "02:50 pm",
"timeline": {
"0": {
"status": "accepted",
"date": "15 may"
},
"1": {
"status": "follow up",
"date": "18 may"
},
"2": {
"status": "follow up",
"date": "20 may"
},
"3": {
"status": "next",
"date": "24 may"
}
}
}
}, {
"enquiry_data": {
"car_model": "images/mercedes-gla-class-primary.jpg",
"car_name": "gla-class",
"user_name": "sanjay",
"user_phone": "9874563210",
"status": "active",
"status_stage": "test drive given",
"date": "05 may 2017",
"time": "02:50 pm",
"timeline": {
"0": {
"status": "accepted",
"date": "15 may"
},
"1": {
"status": "follow up",
"date": "18 may"
},
"2": {
"status": "follow up",
"date": "20 may"
},
"3": {
"status": "next",
"date": "24 may"
}
}
}
}, {
"enquiry_data": {
"car_model": "images/mercedes-gla-class-primary.jpg",
"car_name": "gla-class",
"user_name": "sanjay",
"user_phone": "9874563210",
"status": "active",
"status_stage": "test drive given",
"date": "05 may 2017",
"time": "02:50 pm",
"timeline": {
"0": {
"status": "accepted",
"date": "15 may"
},
"1": {
"status": "follow up",
"date": "18 may"
},
"2": {
"status": "follow up",
"date": "20 may"
},
"3": {
"status": "next",
"date": "24 may"
}
}
}
}, {
"enquiry_data": {
"car_model": "images/mercedes-gla-class-primary.jpg",
"car_name": "gla-class",
"user_name": "sanjay",
"user_phone": "9874563210",
"status": "active",
"status_stage": "test drive given",
"date": "05 may 2017",
"time": "02:50 pm",
"timeline": {
"0": {
"status": "accepted",
"date": "15 may"
},
"1": {
"status": "follow up",
"date": "18 may"
},
"2": {
"status": "follow up",
"date": "20 may"
},
"3": {
"status": "next",
"date": "24 may"
}
}
}
}, {
"enquiry_data": {
"car_model": "images/mercedes-gla-class-primary.jpg",
"car_name": "gla-class",
"user_name": "sanjay",
"user_phone": "9874563210",
"status": "active",
"status_stage": "test drive given",
"date": "05 may 2017",
"time": "02:50 pm",
"timeline": {
"0": {
"status": "accepted",
"date": "15 may"
},
"1": {
"status": "follow up",
"date": "18 may"
},
"2": {
"status": "follow up",
"date": "20 may"
},
"3": {
"status": "next",
"date": "24 may"
}
}
}
}]
-------------------------------------------
var enquiryApp = angular.module('enquiryList', []);
enquiryApp.controller('enquiryCtrl', function($scope, $http){
$http.get('js/timeLine.json').then(function(data){
// $scope.features = response.data;
$scope.enqList = [];
angular.forEach(data, function(enquiry_data){
angular.forEach(enquiry_data.timeline, function(timeline){
$scope.enqList.push({
enqList:enquiry_data.car_name,
});
});
console.log($scope.enqList.car_name);
});
// console.log(response.data.items[0].enquiry_data.car_name);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">
</script>
<div ng-controller="enquiryCtrl">
<div class="enquery-block" ng-repeat="x in enqList">
<div class="enquiryInfo">
<div class="row">
<div class="col-sm-3">
<img src="images/mercedes-gla-class-primary.jpg" class="img-responsive" alt="b Class">
<figcaption>{{x.car_name}}</figcaption>
</div>
<div class="col-sm-6">
<h1>sanjay kumar singh</h1>
<h3>9876543210</h3>
</div>
<div class="col-sm-3">
<div class="enqStatus">
<p><i class="fa fa-circle green"></i>active</p>
<p>test drive given</p>
</div>
</div>
</div>
</div>
<div class="enquirystatus">
<div id="timeLine" class="timeLine">
<div class="line"></div>
<ul>
<li>
<div class="staDate">
<p>Accepted</p>
<p>22 May</p>
</div>
<span></span>
</li>
</ul>
</div>
</div>
<div class="enquiryAction">
<div class="row">
<div class="col-sm-6">
<div><span><img src="images/calendar.png"></span>22 May 2017 <span>/</span> 02:15 pm</div>
</div>
<div class="col-sm-6">
<button class="btn btn-default pull-right" data-toggle="modal" data-target="#statusModal">add follow up</button>
</div>
</div>
</div>
</div>
</div>
thing is working, I am trying call JSON file in Angular controller and want to display data in view, but no error and nothing is working, below is my code, please help.
You should replace :
$scope.enqList.push({
enqList : enquiry_data.car_name,
});
with :
$scope.enqList.push({
car_name: enquiry_data.car_name,
});
So now this works :
<div class="enquery-block" ng-repeat="x in enqList">
<figcaption>{{x.car_name}}</figcaption>
</div>
Here is the solution.
var app = angular.module('demo', []);
app.controller('MainCtrl', function($scope, $http) {
$http.get("data.json").then(function(data){
$scope.rooms = data.data;
console.log($scope.rooms);
});
});
<ul ng-repeat="x in rooms" class="list">
<li>{{x.car_model}}</li>
<ul ng-repeat="b in x.timeline" class="timeline">
<li>
<p>{{b.stat}}</p>
<p>{{b.date}}</p>
</li>
</ul>
</ul>

showing File System Structure using JSON in angularJS

I need a JSON array which contains a sample file system with corresponding attributes(type, name, size, created, modified, last_accessed etc.). Then I want to plot it as a web file system in a tree structure.
So, how will my JSON be look like & how should I make that tree in angularJS?
Editions:
I made JSON as -
{
"data" : {
"path":[
"My Files",
"Documents"
],
"data" : [
{
"name": "Work Documents",
"type": "folder",
"owner": "me",
"size": "",
"modified": "May 24, 2017",
"opened": "May 22, 2017",
"created": "May 22, 2017",
"extention": "",
"location": "My Files > Documents",
"offline": true,
"children" : [
{
"name": "Public Documents",
"type": "folder",
"owner": "public",
"size": "",
"modified": "July 8, 2015",
"opened": "July 8, 2015",
"created": "July 8, 2015",
"extention": "",
"location": "My Files > Documents",
"offline": true
},
{
"name": "Ongoing projects",
"type": "document",
"owner": "Emily Bennett",
"size": "1.2 Mb",
"modified": "July 8, 2015",
"opened": "July 8, 2015",
"created": "July 8, 2015",
"extention": "",
"location": "My Files > Documents",
"offline": true,
"preview": "assets/images/etc/sample-file-preview.jpg"
},
{
"name": "Shopping list",
"type": "document",
"owner": "Emily Bennett",
"size": "980 Kb",
"modified": "July 8, 2015",
"opened": "July 8, 2015",
"created": "July 8, 2015",
"extention": "",
"location": "My Files > Documents",
"offline": true,
"preview": "assets/images/etc/sample-file-preview.jpg"
}
]
},
{
"name": "Private Documents",
"type": "folder",
"owner": "me",
"size": "",
"modified": "July 8, 2015",
"opened": "July 8, 2015",
"created": "July 8, 2015",
"extention": "",
"location": "My Files > Documents",
"offline": true
}
]
}
}
But how can I iterate it in html ? I'm currently displaying it, but unable to understand how to show 'Children' on click of folder. This is my html -
<tr ng-repeat="file in vm.data | filter:global.search" ng-click="vm.select(file)" ng-class="{'selected' : vm.selected === file}">
<td class="file-icon">
<i class="icon-{{file.type}}"></i>
</td>
<td class="name">{{file.name}}</td>
<td class="type" hide show-gt-sm>{{file.type}}</td>
<td class="owner" hide-xs>{{file.owner}}</td>
<td class="size" hide-xs>{{file.size === '' ? '-': file.size}}</td>
<td class="last-modified" hide show-gt-md>{{file.modified}}</td>
<td class="show-details" hide-gt-md>
<md-button class="md-icon-button sidenav-toggle" ng-click="vm.toggleDetails(file)" aria-label="Details" translate translate-attr-aria-label="FM.DETAILS">
<md-icon md-font-icon="icon-information-outline"></md-icon>
</md-button>
</td>
</tr>
You can create a Json like this if it fullfil your requirements. Suppose you have a root dir of name root and it has child dirs books and videos.
Var root = {
dirName: "root",
metadata: {
size: " 1 gb",
type: "dir",
last_modified: " 24 may 2017",
// Other attributes
},
children: [
{
dirName: "books",
metadata: {
size: " 10 mb",
type: "dir",
last_modified: " 24 may 2017",
// Other attributes
},
Children:{}
},
{
dirName: "videos",
metadata: {
size: " 10 mb",
type: "dir",
last_modified: " 24 may 2017",
// Other attributes
}
}
]
}
You can now modify it as per your needs
I used this to display tree structure - https://github.com/eu81273/angular.treeview

how to run ng-repeat or forEach of angular on complex json

I have a situation where I'm getting list of complex JSON data(nested type).I'm new to AngularJS, not getting solution to run ng-repeat or forEach over that.
My returned data is like below.
[{
"studPersonalDetails": {
"id": 0,
"name": "Digvijay",
"middleName": "",
"lastName": "Singh",
"fatherName": "abac",
"motherName": "abc",
"dob": "5/7/1990 12:00:00 AM"
},
"clients": {
"clientID": 1,
"clientName": null,
"clientDescriptions": null
},
"studentAddress": {
"address1": "12",
"address2": "12",
"city": "21",
"state": "212",
"pin": 2
},
"courseDetails": {
"courseID": 12,
"courseName": "12",
"courseDetail": null
},
"studentContacts": {
"email": "12",
"alternatePhone": "12",
"phone": "qw"
}
}, {
"studPersonalDetails": {
"id": 0,
"name": "Anil",
"middleName": "kumar",
"lastName": "Sharma",
"fatherName": "bac",
"motherName": "bac",
"dob": "2/11/1989 12:00:00 AM"
},
"clients": {
"clientID": 1,
"clientName": null,
"clientDescriptions": null
},
"studentAddress": {
"address1": "21",
"address2": "21",
"city": "5456",
"state": "8",
"pin": 7
},
"courseDetails": {
"courseID": 58,
"courseName": "58",
"courseDetail": null
},
"studentContacts": {
"email": "12",
"alternatePhone": "12",
"phone": "abc"
}
}]
This is the response returned by API.
Any help would be appreciated!Thanks!!
You can try something like this:
JSFiddle.
<div ng-repeat="currentRow in data">
<span>{{currentRow.studPersonalDetails.name}}</span>
<span>{{currentRow.studPersonalDetails.lastName}}</span>
</div>
$scope.arr = [{
"studPersonalDetails": {
"id": 0,
"name": "Digvijay",
"middleName": "",
"lastName": "Singh",
"fatherName": "Shyam Bahadur Singh",
"motherName": "ramawati Devi",
"dob": "5/7/1990 12:00:00 AM"
},
"clients": {
"clientID": 1,
"clientName": null,
"clientDescriptions": null
},
"studentAddress": {
"address1": "12",
"address2": "12",
"city": "21",
"state": "212",
"pin": 2
},
"courseDetails": {
"courseID": 12,
"courseName": "12",
"courseDetail": null
},
"studentContacts": {
"email": "12",
"alternatePhone": "12",
"phone": "qw"
}
}, {
"studPersonalDetails": {
"id": 0,
"name": "Anil",
"middleName": "kumar",
"lastName": "Sharma",
"fatherName": "bac",
"motherName": "bac",
"dob": "2/11/1989 12:00:00 AM"
},
"clients": {
"clientID": 1,
"clientName": null,
"clientDescriptions": null
},
"studentAddress": {
"address1": "21",
"address2": "21",
"city": "5456",
"state": "8",
"pin": 7
},
"courseDetails": {
"courseID": 58,
"courseName": "58",
"courseDetail": null
},
"studentContacts": {
"email": "12",
"alternatePhone": "12",
"phone": "abc"
}
}]
Using angular.forEach you can do it like this.
angular.forEach($scope.arr,function(value,key){
console.log(value.studPersonalDetails.lastName);
})
Using ng-repeat,you can do it like this.
<tr ng-repeat="oneArr in arr">
<td> {{oneArr.studPersonalDetails.name}}</td>
</tr>
Here is the plunker
You can see an angular ngRepeat example with your data here
First, create a controller with your data:
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.datalist = [
{
"studPersonalDetails":{
"id":0,
"name":"Digvijay",
"middleName":"",
"lastName":"Singh",
"fatherName":"Shyam Bahadur Singh",
"motherName":"ramawati Devi",
"dob":"5/7/1990 12:00:00 AM"
},
"clients":{
"clientID":1,
"clientName":null,
"clientDescriptions":null
},
"studentAddress":{
"address1":"12",
"address2":"12",
"city":"21",
"state":"212",
"pin":2
},
"courseDetails":{
"courseID":12,
"courseName":"12",
"courseDetail":null
},
"studentContacts":{
"email":"12",
"alternatePhone":"12",
"phone":"qw"
}
},
{
"studPersonalDetails":{
"id":0,
"name":"Anil",
"middleName":"kumar",
"lastName":"Sharma",
"fatherName":"bac",
"motherName":"bac",
"dob":"2/11/1989 12:00:00 AM"
},
"clients":{
"clientID":1,
"clientName":null,
"clientDescriptions":null
},
"studentAddress":{
"address1":"21",
"address2":"21",
"city":"5456",
"state":"8",
"pin":7
},
"courseDetails":{
"courseID":58,
"courseName":"58",
"courseDetail":null
},
"studentContacts":{
"email":"12",
"alternatePhone":"12",
"phone":"abc"
}
}
];
}
Then attach this controller to your view and use the ngRepeat to extract each top-level object from dataList array (during the itaration the current object has alias data)
Inside the repeat statement you can display requested values accessing the data object using dot notation:
<div ng-controller="MyCtrl">
<div class="row" ng-repeat="data in datalist">
<p><span>Name</span> {{ data.studPersonalDetails.name }}</p>
<p><span>CourseID</span> {{ data.courseDetails.courseID }}</p>
</div>
</div>

JSON iterating through objects and accessing data result to cannot read property of undefined

I'm parsing a json from a website and trying to get some data from it. However, it is giving me undefined values when iterating through a collection of objects. If it's a badly formatted json, unfortunately, I can't change it.
[
{
"startYear": 2014,
"startMonth": 6,
"startDay": 31,
"endYear": 2014,
"endMonth": 7,
"endDay": 29,
"selectedDate": "2014_7_8",
"departureStation": "Manila",
"arrivalStation": "Boracay (Caticlan)",
"departureStationCode": "(MNL)",
"arrivalStationCode": "(MPH)",
"departureLabel": "DEPARTURE",
"arrivalLabel": "RETURN",
"dateMarketHash": {
"date_0_2014_6_31": {
"containerId": "date_0_2014_6_31",
"fromLabel": "From",
"currency": "PHP",
"price": null,
"formattedDate": "Thu, Jul 31, 2014",
"year": "2014",
"month": "6",
"day": "31",
"points": null,
"pointsSuffix": "",
"pointsLabelAppend": ""
},
"date_0_2014_7_1": {
"containerId": "date_0_2014_7_1",
"fromLabel": "From",
"currency": "PHP",
"price": 1929,
"formattedDate": "Fri, Aug 01, 2014",
"year": "2014",
"month": "7",
"day": "1",
"points": 0,
"pointsSuffix": "",
"pointsLabelAppend": ""
}
}
},
{
"startYear": 2014,
"startMonth": 7,
"startDay": 24,
"endYear": 2014,
"endMonth": 8,
"endDay": 23,
"selectedDate": "2014_8_8",
"departureStation": "Boracay (Caticlan)",
"arrivalStation": "Manila",
"departureStationCode": "(MPH)",
"arrivalStationCode": "(MNL)",
"departureLabel": "DEPARTURE",
"arrivalLabel": "RETURN",
"dateMarketHash": {
"date_1_2014_7_24": {
"containerId": "date_1_2014_7_24",
"fromLabel": "From",
"currency": "PHP",
"price": 3079,
"formattedDate": "Sun, Aug 24, 2014",
"year": "2014",
"month": "7",
"day": "24",
"points": 0,
"pointsSuffix": "",
"pointsLabelAppend": ""
},
"date_1_2014_7_25": {
"containerId": "date_1_2014_7_25",
"fromLabel": "From",
"currency": "PHP",
"price": 3079,
"formattedDate": "Mon, Aug 25, 2014",
"year": "2014",
"month": "7",
"day": "25",
"points": 0,
"pointsSuffix": "",
"pointsLabelAppend": ""
}
}
}
]
my code:
// Printing the value of 'day' from each 'dateMarketHash'
for (i = 0; i<json.length; i++)
{
var current = json[i].dateMarketHash;
for(var key in current){
if (current.hasOwnProperty(key)) {
document.write(current.key.day); // Cannot read property 'day' of undefined
}
}
}
No, it is the fact that you are reading "key" and not the variable. You need to use bracket notation, not dot notation.
document.write(current[key].day);
And you should not be using document.write.

Categories