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

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

Want to acces object in requests array of profile in users collection

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

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

Vue.js Uncaught TypeError: this.list.$remove is not a function

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).

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

How to show JSON object by using ng-repeat?

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

Categories

Resources