Hey there! I'm fairly new to Angular and dealing with JSON Objects, and I'm currently facing a challenge in extracting data from nested objects.
The task itself isn't too complicated, but the tricky part lies in the fact that the JSON object continuously changes dynamically.
Below is just one example from a long list of JSON objects. This snippet represents only a fraction of a larger object structure.
What I aim to achieve is to retrieve the task.assignment.name for each task within the ng-repeat loop. However, accessing the assignment name proves difficult due to the changing integer positioned between 'assignment' and 'name'.
Check out my object below:
{
"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>content.</p>",
"created_on": "2015-06-17 13:40:31",
"age": 6,
"created_by_id": 66,
"created_by_name": "Jelle",
"created_by_email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c0aa...">[email protected]</a>",
"due_on": "2015-06-19",
"priority": 0,
"task_id": 81,
"project": "Bar"
}
}
}
}
// More object examples here...
This code segment showcases my controller logic:
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);
});
Lastly, the index.html file includes the ng-repeat implementation:
<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> <!-- Unfortunately, this doesn't work as expected -->
<li>Task Description: {{task.assignments.body}}</li> <!-- Also encountering issues here -->
</ul>
</li>
</ul>
</div>
Thanks for any assistance you can provide!