使用 AngularJS 从基于唯一字段的嵌套 JSON 中获取信息答案

【问题标题】：Fetching information from nested JSON based on unique fields using AngularJS使用 AngularJS 从基于唯一字段的嵌套 JSON 中获取信息
【发布时间】：2016-04-26 05:46:51
【问题描述】：

我有一个如下的json。

{  
   "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":[  

   ],
}

我想首先获取其 ID 与子数组中的元素匹配的详细信息例如对于 id:14 有 3 个孩子 24,16,15。然后控件应该直接转到 id:15 并获取 id:15 的详细信息。再次 id 有孩子，例如。考虑 id:23 没有子节点，将直接打印消息。

请指导我如何使用 ng-repeat of angular 来实现这一点？

【问题讨论】：

是否要基于子级迭代子级
我认为需要更清晰，无法理解您的意思。尝试重新措辞。
是的，我想在 JSON 中浏览我收到的内容
我实际上是在设计论坛。我有一个父帖子，子帖子意味着回复父帖子等等。但是我收到的 json 显示的帖子顺序忽略了父子帖子之间的关系。所以在我的 json 中有一个子元素，它显示了对父帖子的回复数量并希望相应地显示。
Like post id: 23 是对 post id: 15 的回复，所以它应该只显示在它的父级下。就像我们在 stackoverflow 或任何其他此类论坛中一样。评论来自主要答案而不是结束。

标签： javascript angularjs json

【解决方案1】：

请参阅demo。

请在下面找到代码：

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": [

    ],
  }];
});

更新：根据要求

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

【讨论】：

嗨，shashank，感谢您的回复。我还想获取与该 id 匹配的孩子的消息。
谢谢，我会期待的

【解决方案2】：

使用 ng-repeat 来显示记录。

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

这是在html中显示的一种方式。 ng-repeat会根据您的页面设计而改变。

【讨论】：

【解决方案3】：

你可以使用lodash或下划线_.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>

【讨论】：

【解决方案4】：

首先，您需要将 json 重组为树形结构。可能你想看看这个post。然后你必须递归添加templates

【讨论】：