Fetching information from nested JSON based on unique fields using AngularJS

Question

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 ?

I think more clarity is required, couldn't get your point. Try re-wording. — Saurabh Tiwari, Apr 26 '16 at 05:55
Yes, I want to navigate within JSON itself what i have received — Akshay Dusane, Apr 26 '16 at 05:55
I am actually designing forums.I have a parent post and child post means reply to the parent post and so on. But the json what I am receiving displays the posts serially ignoring the relation between parent and child post.So in my json there is a children element which shows how many replies are given to parent post and want to display accordingly. — Akshay Dusane, Apr 26 '16 at 05:59
Like post id: 23 is a reply given to post id: 15 So it should display under its parent only.Like we have in stackoverflow or any other such forums.Comments comes under the main answer not in the end. — Akshay Dusane, Apr 26 '16 at 06:03
consider unflatten your array first, see this answer for a similar case: http://stackoverflow.com/a/22072374/553073 — lastr2d2, Apr 26 '16 at 06:19

Shashank · Answer 1 · 2016-04-26T09:37:06.710

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

Hi shashank thanks for the reply.I also want to fetch the message of schildren which matched that id. — Akshay Dusane, Apr 26 '16 at 09:10

score 0 · Answer 2 · answered Apr 26 '16 at 06:10

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.

score 0 · Answer 3 · answered Apr 26 '16 at 06:26

0

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>

answered Apr 26 '16 at 06:26

antish Gajwani

70
10

score 0 · Answer 4 · edited May 23 '17 at 12:32

0

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

edited May 23 '17 at 12:32

Community

1
1

answered Apr 26 '16 at 06:47

akniazi

732
2
7
23

Fetching information from nested JSON based on unique fields using AngularJS

4 Answers4