个人中心
gpt4 book ai didi

javascript - 如何通过匹配父级在树结构中打印动态嵌套的 Json 数组

转载 作者：行者123 更新时间：2023-11-30 15:23:32 25 4
gpt4 key购买 nike

如何以树形格式打印这个动态 Json 数组我期望的输出是这样的

firstname :- test
Last name :-test1

Account=>

          role :-test3

          status:test4

Account1=>

   role:-

   status:-

json

 $scope.inputs = [
    {
      "firstname" : "Test"
    },{
      "lastname" : "Test1"
    },{                           
      "Account" : [

        {"role" : "Test3"},
        {"status" : "Test4"},
      ]
    },
    {
      "Account1" : [

        {"role" : "Test3"},
        {"status" : "Test4"},
      ]
    },
    {
      "Account2" : [

        {"role" : {
          'dim3': {
            'dim4':{
              'dim5':'cccc'
            }
          }
        }

      },
        {"status" : "Test4"},
        {"status" : "Test4"},
      ]
    },
    {
    "ending" : "yes"
  }
  ];

最佳答案

您可以通过在模板中递归地包含另一个模板来实现，该模板根据对象是否仍然是对象以不同方式呈现对象中的每个值。函数 isArrayOrObject 用于检查一个值是否为对象

//index.html:

<body ng-app="mainApp">
    <div ng-controller="controller">    
        <ul>
            <li ng-repeat="(key, value) in inputs" ng-include="'node_renderer.html'"></li>
        </ul>       
    </div>
</body>

//node_renderer.html: a template to be included that render each value in the object:

<div ng-switch="isArrayOrObject(value)">
    <div ng-switch-when="false">{{key}}: {{value}}</div>
    <div ng-switch-when="true">
        <span>{{key}}=></span>
        <ul>
            <li ng-repeat="(key, value) in value" ng-include="'node_renderer.html'"></li>
        </ul>
    </div>
</div>


app.controller('controller', function($scope) {

    $scope.isArrayOrObject = function(value) {
        return angular.isObject(value);
    };      

    $scope.inputs = [
    {
      "firstname" : "Test"
    },{
      "lastname" : "Test1"
    },{                           
      "Account" : [

        {"role" : "Test3"},
        {"status" : "Test4"},
      ]
    },
    {
      "Account1" : [

        {"role" : "Test3"},
        {"status" : "Test4"},
      ]
    },
    {
      "Account2" : [

        {"role" : {
          'dim3': {
            'dim4':{
              'dim5':'cccc'
            }
          }
        }

      },
        {"status" : "Test4"},
        {"status" : "Test4"},
      ]
    },
    {
        "ending" : "yes"
    }
    ];  
});

关于javascript - 如何通过匹配父级在树结构中打印动态嵌套的 Json 数组，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43337645/

25 4 0
文章推荐： c - c程序在arm平台编译时报错
文章推荐： c# - 根据元素变量和元素位置拆分列表
文章推荐： c - 如何声明函数一次传递一个参数 argv[i]？在C中
文章推荐： c# - 访问套接字应用程序的 HttpClient
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com