How to show JSON object by using ng-repeat? - javascript

I'm creating a treeview menu using angularJS. Is there any way to get this results? I'm using a controller to get this ($scope.results). and I put the JSON result set and the controller..
<ul>
<li class="folder"><span>Pages</span>
<ul>
<li class="file"><span>page1</span></li>
<li class="file"><span>page2</span></li>
</ul>
</li>
<li class="folder"><span>TestSuites</span>
<ul>
<li class="file"><span>TestSuites1</span></li>
</ul>
</li>
</ul>
JSON..
{
"result": [
{
"#type": "d",
"#rid": "#-2:1",
"#version": 0,
"name": "pg3"
},
{
"#type": "d",
"#rid": "#-2:2",
"#version": 0,
"name": "pg3"
},
{
"#type": "d",
"#rid": "#-2:3",
"#version": 0,
"name": "pg3"
}
],
"notification": "Query executed in 0.023 sec. Returned 3 record(s)"
}
Controller..
vController.controller('v-PagesController', [
'$scope',
'$q',
'vRESTService',
function($scope, $q, vRESTService) {
vRESTService.getPages().then(
function(results) {
$scope.results = results;
console.log(results);
//console.log(results);
// console.log(res);
//;;
}, function() {
console.log(Error);
});
}
]);

You can use $http.get
Js file
$http.get('.json file ').success(function(data) {
$scope.name = name;
}
HTML File
<table> <tr ng-repeat= "x in y"> <td>{{x.Name }}</td> </tr> </table>

I've only presented the pages part as you have said that the json doesn't contain the testsuites yet:
Modify your controller to assign results to a scope property:
vRESTService.getPages().then(
function(results) {
console.log(results);
$scope.results = results;
}
Then your view should be as follows:
<ul>
<li class="folder"><span>Pages</span>
<ul>
<li class="file" ng-repeat="page in results.result"><span>{{page.name}}</span></li>
</ul>
</li>
</ul>
http://plnkr.co/edit/mKLTxwskjPECkQUCsV05?p=preview
I'd recommend you change your json to have a pages property and a testSuites property:
{
"pages": [
{
"#type": "d",
"#rid": "#-2:1",
"#version": 0,
"name": "pg3"
},
{
"#type": "d",
"#rid": "#-2:2",
"#version": 0,
"name": "pg3"
},
{
"#type": "d",
"#rid": "#-2:3",
"#version": 0,
"name": "pg3"
}
],
"testSuites": [
{
"name": "TestSuites1"
}
],
"notification": "Query executed in 0.023 sec. Returned 3 record(s)"
}
And then your view would be:
<ul>
<li class="folder"><span>Pages</span>
<ul>
<li class="file" ng-repeat="page in results.pages"><span>{{page.name}}</span></li>
</ul>
</li>
<li class="folder"><span>TestSuites</span>
<ul>
<li class="file" ng-repeat="testSuite in results.testSuites"><span>{{testSuite.name}}</span></li>
</ul>
</li>
</ul>
http://plnkr.co/edit/dL2OGTkiEOSzmK0O1pux?p=preview

AngularJS provides $http.get method to fetch JSON file. Once you fetch the data in response store it into a $scope object inside your controller. Then use ng-repeat to bind that data. Look at the example here http://jharaphula.com/how-to-display-json-data-in-a-table-using-angularjs

Related

interate through nested json file using ng-repeat not working

So I have a json file with nested elements. This is my json file:
[
{
"qid": "1",
"contester": "0",
"answer": "0",
"question": "What are you most likely to do after getting into an argument? ",
"images": [
{
"qid": "1",
"imageid": "AB100",
"imgname": "doghug_q1",
"imgpath": "Images\/Q1\/doghug_q1.jpg"
},
{
"qid": "1",
"imageid": "AB101",
"imgname": "eq_q1.jpg",
"imgpath": "Images\/Q1\/eat_q1.jpg"
},
{
"qid": "1",
"imageid": "AB102",
"imgname": "headache_q1",
"imgpath": "Images\/Q1\/headache_q1.jpg"
},
{
"qid": "1",
"imageid": "AB106",
"imgname": "scream_q1.jpg",
"imgpath": "Images\/Q1\/scream_q1.jpg"
},
{
"qid": "1",
"imageid": "AB107",
"imgname": "shopping_q1",
"imgpath": "Images\/Q1\/shopping_q1.jpg"
},
{
"qid": "1",
"imageid": "AB108",
"imgname": "walkAlone_q1",
"imgpath": "Images\/Q1\/walkAlone_q1.jpg"
}
]
},
{
"qid": "2",
"contester": "0",
"answer": "0",
"question": "Which game would you rather play?",
"images": [
{
"qid": "2",
"imageid": "AB105",
"imgname": "charades_q2.jpg",
"imgpath": "Images\/Q2\/charades_q2.jpg"
},
{
"qid": "2",
"imageid": "AB109",
"imgname": "playingCards_q2.jpg",
"imgpath": "Images\/Q2\/playingCards_q2.jpg"
},
{
"qid": "2",
"imageid": "AB110",
"imgname": "chess_q2",
"imgpath": "Images\/Q2\/chess_q2.jpg"
},
{
"qid": "2",
"imageid": "AB111",
"imgname": "twister_q2",
"imgpath": "Images\/Q2\/twister_q2.jpg"
}
]
}
]
And this is my controller that i used to access the json :
var app= angular.module('myApp', []);
app.controller('ListCtrl', ['$scope', '$http',
function($scope, $http) {
$http.get('results.json').success(function(data) {
$scope.questions = data; // get data from json
angular.forEach($scope.questions, function(item){
console.log(item.images);
})
});
});
}
]);
And then my html code to display the questions and each questions list of images using the ng-repeat :
<body ng-app="myApp" >
<div ng-controller="ListCtrl">
<ul>
<li ng-repeat="question in questions"> {{question.qid}} </li>
</ul>
</div>
</body>
As of now iam trying to display the questions id from the json file as a list however the output im getting is a:
{{question.qid}}
as the output in my html page.. Can someone please help me. I dont know what im doing wrong.
your code has some missing things.
Here is working example of your code
http://plnkr.co/edit/FvD26TYZ9v8TbgUBUzN2?p=preview
firstly,
var app = angular.module('myApp', []); //variable app is missing.
secondly, data you mention has missing closing square brace.
First define app
var app = angular.module('myApp', []);
Then initiate your $scope.questions on your controller like
$scope.questions = [];
Also you might need to parse your data with
$scope.questions = JSON.parse(data);
You haven's define the app so you should change the first line of your code to this and check your closing tags on your js code...:
var app = angular.module('myApp', []);
app.controller('ListCtrl', ['$scope', '$http',
function($scope, $http) {
$scope.questions = [];
$http.get('results.json').success(function(data) {
$scope.questions = data; // get data from json
angular.forEach($scope.questions, function(item){
console.log(item.images);
})
});
}
]);
Complete working code for your case :
HTML
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="ListCtrl">
<ul>
<li ng-repeat="question in questions"> {{question.qid}} </li>
</ul>
</div>
</body>
</html>
JS
var app = angular.module('plunker',[]);
app.controller('ListCtrl',function ($scope,$http) {
$http.get('data.json').success(function(data) {
$scope.questions = data; // get data from json
});
});
Working Plunker
It is working !! Try once !!

Fetching information from nested JSON based on unique fields using AngularJS

I have a json as following.
{
"id":14,
"discussion":8,
"parent":0,
"userid":2,
"subject":"communication skill discussion 2",
"message":"<p>hi all to communication discussion 2 </p>",
"children":[
24,
16,
15
]
},
{
"id":15,
"discussion":8,
"parent":14,
"userid":2,
"subject":"Re: communication skill discussion 2",
"message":"<p>hiiiiiiiiii</p>",
"children":[
25,
23
],
},
{
"id":23,
"discussion":8,
"parent":15,
"userid":2,
"created":1461562317,
"modified":1461562317,
"mailed":0,
"subject":"Re: communication skill discussion 2",
"message":"<p>helloooo</p>",
"children":[
],
}
I want first fetch the details whose Ids matches with the elments in children array
such as for id:14 there are 3 children 24,16,15.Then the control should go directly to id:15 and fetch details of id:15.Again id has children eg. consider id:23 which has no children and will directly print the message.
Please guide me how will I achieve this using ng-repeat of angular ?
Refer to the demo.
Please find the code below:
HTML:
<div ng-app="app" ng-controller="test">
<div ng-repeat="(key,value) in data">
{{key + 1}}) --
<span ng-if="value.children.length > 0">
{{value.children}}
</span>
<span ng-if="!(value.children.length > 0)">
No children found!!
</span>
</div>
</div>
JS:
var app = angular.module('app', []);
app.controller('test', function($scope) {
$scope.data = [{
"id": 14,
"discussion": 8,
"parent": 0,
"userid": 2,
"subject": "communication skill discussion 2",
"message": "<p>hi all to communication discussion 2 </p>",
"children": [
24,
16,
15
]
}, {
"id": 15,
"discussion": 8,
"parent": 14,
"userid": 2,
"subject": "Re: communication skill discussion 2",
"message": "<p>hiiiiiiiiii</p>",
"children": [
25,
23
],
}, {
"id": 23,
"discussion": 8,
"parent": 15,
"userid": 2,
"created": 1461562317,
"modified": 1461562317,
"mailed": 0,
"subject": "Re: communication skill discussion 2",
"message": "<p>helloooo</p>",
"children": [
],
}];
});
UPDATE: As per the request
Demo
HTML:
<div ng-app="app" ng-controller="test">
<div ng-repeat="(key,value) in data">
[{{key + 1}}] --
<div ng-if="value.children.length > 0">
<div ng-repeat="item in value.children">
<span>{{item}}</span> <span class="green" ng-bind-html="getMessage(item)"></span>
</div>
</div>
<span ng-if="!(value.children.length > 0)">
No children found!!
</span>
<br />
</div>
</div>
JS:
$scope.getMessage = function(itemId) {
var flag = true;
var msg;
angular.forEach($scope.data, function(value, key) {
if (flag && value.id == itemId) {
flag = false;
msg = value.message;
}
});
return $sce.trustAsHtml(msg);
}
CSS:
.green {
color: green;
}
Use ng-repeat to display the records.
<ul ng:controller="Cntl">
<li ng:repeat="item in data">
{{item.subject}}: Parent
<ul>
<li ng:repeat="child in item.children">{{child}} : Children
</li>
</ul>
</li>
This is one of the way to display in html. Based on your page design ng-repeat will change.
You can use lodash or underscore _.where:
<div ng:controller="Cntl">
<div ng:repeat="item in data">
{{item.subject}}<br/>
Children
<div ng:repeat="child in item.children">{{_.where(data, {id:child});}}
</div>
</div>
First you need to restructure your json into a tree structure. May be you want to have a look at this post. Then you have to recursively add templates

Angular ng-repeat this JSON structure for user to user messaging

Very simple user to user messaging piece that I'm struggling with the interface in an app to use ng-repeat on the items.
Here is the data:
{
"ID": 4118,
"CreatedDate": "2015-08-20T03:12:50.397",
"recipient": [
{
"ID": 13,
"FirstName": "Heather",
"LastName": "Martin",
"ProfileImage": "https://../profilepictures/13"
}
],
"sender": [
{
"ID": 1046,
"FirstName": "Brad",
"LastName": "Martin",
"ProfileImage": "https://../profilepictures/1046"
}
],
"messages": [
{
"ID": 4137,
"ConversationID": 4118,
"UserID": 1046,
"Body": "hey",
"CreatedDate": "2015-08-20T14:34:42.4716233+00:00"
}
]
}
In the controller I get the conversations out of LS, one conversation is one record in LocalStorage, the JSON above will represent one conversation.
$scope.convo = JSON.parse(localStorage.getItem("convo-" + $stateParams.chatId));
Here is the structure I am trying to achieve (again, very simple, nothing fancy).
<ul>
<li class="item-avatar-left" ng-repeat="c in convo track by $index">
<img ng-src="{{c.recipient[0].ProfileImage}}" />
<p class="bubble speech">
{{c.messages[0].Body}}
</p>
</li>
</ul>
I've tried multiple variations on the ng-repeat directive.
Essentially what I'd like to achieve is just showing one <li> per each message.
Current result:
Console output of a conversation from LS:
You can try normally by ng-repeat
In controller like:
$scope.convo = [
{
"ID": 4118,
"CreatedDate": '2015-08-20T03:12:50.397',
//...... as your info
}
];
In HTML:
<ul>
<li class="item-avatar-left" ng-repeat="c in convo">
<img ng-src="{{c.recipient[0].ProfileImage}}" />
<p class="bubble speech" ng-repeat="m in c.messages">
{{m.Body}}
</p>
</li>
</ul>
NB: your $scope.convo need to be an array

Getting data from nested JSON object !!WITH ID'S!! using angular GET

Im kinda new to Angular/ JSON Objects and i'm trying to get something from a nested object.
That is not so hard, but the problem is that the JSON object has an that changes on the fly.
Below an example of 1 object from a complete list of JSON objects. As you can see this part of a larger object.
What i want is the task.assignment.name for each task in the ng-repeat, but i cant get to the assignment.name because of the integer that's between the assignment and name.
Look at my object:
{
"project-45": {
"label": "Bar",
"url": "http://someurl.com/api",
"assignments": {
"5147": {
"id": 5147,
"type": "Task",
"project_id": 45,
"assignee_id": 9,
"label_id": 27,
"category_id": 0,
"milestone_id": 0,
"name": "assignmentname",
"body": "<p>body.</p>",
"created_on": "2015-06-17 13:40:31",
"age": 6,
"created_by_id": 66,
"created_by_name": "Jelle",
"created_by_email": "jelle#example.com",
"due_on": "2015-06-19",
"priority": 0,
"task_id": 81,
"project": "Bar"
}
}
}
}
project-75": {
"label": "Another",
"url": "http://mijn.example.com/api",
"assignments": {
"5153":
...
This is my controller:
var main = angular.module("main", []);
main.controller("mainCntrl", function($scope, $http){
var apiUrl = "http://my.example.com/api.php?&format=json&";
var apiKey = "&auth_api_token=somekey";
var onUserComplete = function(response){
$scope.user = response.data;
console.log("User Data loaded");
}
var onTasksComplete = function(response){
$scope.tasks = response.data;
console.log("Tasks loaded");
}
$http.get(apiUrl + "path=my-tasks" + apiKey).then(onTasksComplete);
$http.get(apiUrl + "path=people/1/users/9" + apiKey).then(onUserComplete);
}
);
and finally the index.html file with the ng-reapter
<div class=" block full border">
<h3>Active tasks</h3>
<ul ng-repeat="task in tasks">
<li>
<ul>
<li>{{$index+1}}</li>
<li>Project: {{task.label}}</li>
<li>task name: {{task.assignments.name}}</li> <!-- Doesnt work -->
<li>task description: {{task.assignments.body}}</li> <!-- Doesnt work -->
</ul>
</li>
</ul>
</div>
Thanks!
<div class=" block full border">
<h3>Active tasks</h3>
<ul ng-repeat="task in tasks">
<li>
<ul ng-repeat="assignment in task.assignments">
<li>{{$index+1}}</li>
<li>Project: {{assignment.label}}</li>
<li>task name: {{assignment.name}}</li> <!-- Doesnt work -->
<li>task description: {{assignment.body}}</li> <!-- Doesnt work -->
</ul>
</li>
</ul>
</div>

Simple AngularJS Search

I would like to know what is wrong with my code when I am creating a simple AngularJS search controller using $.get to retrieve the data from an external json file. It looks like I have all the correct data. JSfiddle is here: http://jsfiddle.net/jmccommas/MLzF7/
controller:
var personApp = angular.module('personApp', []);
personApp.controller('PersonListCtrl', function ($scope, $http) {
$http.get('data/persons.json').success(function(data) {
$scope.persons = data;
});
});
html:
<div ng-controller="PersonListCtrl">
<div class="bar">
Search: <input ng-model="query">
</div>
<ul class="">
<li ng-repeat="person in persons | filter:query">
{{persons.name}}
</li>
</ul>
</div>
json:
[
{
"name": "John Doe"
},
{
"name": "Mike Doe"
},
{
"name": "Sam Doe"
},
{
"name": "Jerry Doe"
},
{
"name": "Paul Doe"
},
{
"name": "Peter Doe"
},
{
"name": "Fred Doe"
},
{
"name": "Ralph Doe"
},
{
"name": "Mike Doe"
},
{
"name": "John Doe"
}
]
There are three small things which is going wrong (at least in the JS Fiddle)
1. You have set the JS to load on DOM Ready. Change that to no-wrap in head.
2. In the ng-repeat, you have persons.name. It should be person.name. You are getting person when you are lopping through persons.
3. The JSON in the fiddle is not present. So in my own fiddle, I have for now hard coded the object
http://jsfiddle.net/amitavroy/rCrGP/
Change your li to the following
<li ng-repeat="person in persons | filter:query">{{person.name}}</li>

Categories

Resources