Retrieving data from nested JSON by leveraging distinct fields with AngularJS

Question

Retrieving data from nested JSON by leveraging distinct fields with AngularJS

Here is a sample json 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":[  

   ],
}

I need assistance in looping through the json data using ng-repeat in angular. I want to start by fetching details of elements whose IDs correspond to the values in the children array. For example, for id:14, I want to retrieve details of id:15 since it's one of its children. Then continue to the next level of children if available, until we reach an element with no children and print its message.

Can you provide guidance on how to achieve this using ng-repeat in Angular?

javascript angularjs json

Answer 1

Answer №1

View the live demo.

Here is the code snippet:

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: Following the request

Live 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;
}

Answer 2

View the live demo.

Here is the code snippet:

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: Following the request

Live 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;
}

Answer 3

Answer №2

Utilize the ng-repeat directive for rendering the data entries.

<ul ng:controller="Cntl">
<li ng:repeat="item in data">
    {{item.subject}}: Main
    <ul>
        <li ng:repeat="child in item.children">{{child}} : Descendants
        </li>
    </ul>
</li>

This is just one method for displaying content on a webpage using html. The appearance of the ng-repeat may vary depending on your design preferences.

Answer 4

Utilize the ng-repeat directive for rendering the data entries.

<ul ng:controller="Cntl">
<li ng:repeat="item in data">
    {{item.subject}}: Main
    <ul>
        <li ng:repeat="child in item.children">{{child}} : Descendants
        </li>
    </ul>
</li>

This is just one method for displaying content on a webpage using html. The appearance of the ng-repeat may vary depending on your design preferences.

Answer 5

Answer №3

If you want to filter data, you have the option of using either lodash or underscore with their _.where method:

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

Answer 6

If you want to filter data, you have the option of using either lodash or underscore with their _.where method:

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

Answer 7

Answer №4

To begin, it's essential to reformat your json data into a tree-like structure. You may find helpful information in this resource. Next, you'll need to iteratively incorporate templates in a recursive manner.

Answer 8

To begin, it's essential to reformat your json data into a tree-like structure. You may find helpful information in this resource. Next, you'll need to iteratively incorporate templates in a recursive manner.

Retrieving data from nested JSON by leveraging distinct fields with AngularJS

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Ensuring the consistency of form fields using AngularJS

Exploring the process of loading a new page in the browser through nodeJS

What causes the difference between object[key] and Object.key in JavaScript?

Access information from a service

What is the best way to track upload progress while using Django?

Encountering a Null Pointer Exception while working with List Adapter and Custom List View in Android Studio

AngularJS $q.all resolves only after the pre-flight request is successfully completed via the OPTIONS request

Verify user identities using just their passwords

Having Trouble Retrieving Environment Variables in Next.js API Endpoints

How to store lengthy JSON strings in SAP ABAP as variables or literals without extensive formatting restrictions

Selenium WebDriverJs has difficulty in setting up a new client for iOS devices

What is the method for generating a random Vector3 inside a sphere?

Utilize discord.js to create commands with multiple arguments

What is the best way to retrieve all key-value pairs of PDF form fields using JavaScript in Acrobat?

The deployment of the next.js error on Vercel was successful ✓ All five static pages were generated without any issues. However, there was an error encountered during the export process specifically in the

Javascript's most frequent appearance

As I iterated over the Vehicles API data, I encountered an issue while trying to access specific Vehicle information. I received an error message stating "Cannot read property 'id' of undefined

AngularJS design pattern for creating user profiles with both public and private visibility options

Error encountered while waiting for Angular to finish loading in Protractor: ScriptTimeoutError - Task: Protractor.waitForAngular()

Navigating within an ionic framework