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>
Related
i want to create a event in which by clicking on accept in the
termplate i want to get that respective object of requests array in
profile of users collection
this profile section of my users collection (accounts-password)
{
"profile": {
"name": {
"first_name": "Vibhor",
"last_name": "Yadav"
},
"college_name": "ssit",
"gender": "MALE",
"friends": [],
"requests": [{
"id": "z6rDkvayDA5Ckoeab",
"name": "Nitin Gupta"
}],
"requested": [{
"id": "M6edD427rG9WwhfNh",
"name": "suraj Kumar"
}]
}
template to print requests
<template name = "notification">
<div id="req-main-div">
<ul>
{{# each username in reqList}}
<li>
<div id="req-user-name" value={{username.name}}>{{username.name}}</div>
<div id="accept">accept</div>
<div id="delete">delete</div>
</li>
{{/each}}
</ul>
</div>
</template>
helper to the template
Template.notification.helpers({
reqList:function () {
var User = Meteor.user();
return User.profile.requests;
}
});
the method i tried
Template.notification.events({
'click #accept':function(){
console.log(document.getElementById('req-user-name').value);
Meteor.call('accept_request',this);
}
});
i am not able to access DOM too
accept_request:function(accept){
if(!Meteor.userId())
{
throw new Meteor.Error('not-authorized','you are not signed in');
}
var user = Meteor.user();
console.log(accept);
}
iam getting this on console
undefined//for DOM of # accept
Object// for accept in accept_request method
main: ()
__proto__: Object
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
I keep getting the same error that this.list.$remove is not a function. I believe it has something to do with the html markup but not sure. Can anyone point me in the right direction? I have been struggling for the last 2 days.
Vue.component('cart-co', {
template: '#cart-template',
data: function() {
return {
list: []
}
},
ready: function() {
$.getJSON('cart/content', function(data) {
this.list = data;
}.bind(this));
},
methods: {
removeItem: function(item) {
console.log(item);
this.list.$remove(item);
}
}
});
new Vue({
el: 'body',
});
Here is my cart section:
<cart-co></cart-co>
<template id="cart-template">
<div class="cart-content-wrapper">
<div class="cart-content" >
<ul v-if="list" class="scroller" style="height: 250px;">
<li v-for="item in list">
<img src="assets/temp/cart-img.jpg" alt="" width="37" height="34">
<span class="cart-content-count">#{{ item.quantity }}</span>
<strong>#{{ item.name }}</strong>
<em>#{{ item.price | currency }}</em>
<i class="fa fa-times"></i>
</li>
</ul>
<ul v-else class="scroller" style="height: 250px;">
<li>Shopping cart is empty</li>
</ul>
<div class="text-right">
View Cart
Checkout
</div>
</div>
</div>
</template>
$remove is not available in vue js 2.0... now you can use
splice(index,1)
" 1 means it splice one element from the array "
If the data coming back from your $.getJSON() call is an object (with each item in the cart being a key value pair), you can modify your code as follows to handle removing items.
Assumming data looks something like this:
{
"item1": { "name": "Name 1", "quantity": 1, "price": 10 },
"item2": { "name": "Name 2", "quantity": 1, "price": 10 },
"item3": { "name": "Name 3", "quantity": 1, "price": 10 }
};
Pass the key of the item you want to remove in your delete link:
<i class="fa fa-times"></i>
Change your removeItem() method to something like this:
removeItem: function(key) {
Vue.delete(this.list, key);
}
This uses the Vue.delete method to delete the property (and ensures the view reacts to the change).
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
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