如何在angular js中打印json对象和数组值？答案

【问题标题】：How can print json object and array value in angular js?如何在angular js中打印json对象和数组值？
【发布时间】：2016-09-11 05:19:55
【问题描述】：

我的 app.js 看起来像

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
$scope.eventmetrics = [
                        { 
                          _id: '57d439cf666a8d1080003e90',
                           firstName: [ 'name', 'text' ],
                           lastName: [ 'last', 'text' ],
                           taginvitations: ['first,second,third', 'text'],
                           userId: 1,
                           tagcontact: ['file,second,third,fourth', 'text'] 
                         }
                     ]
     });

我想在列表示例中打印 tag1 和 tag2 的数组

邀请

首先
秒
第三

联系

首先
秒
第三
第四个

【问题讨论】：

你想在哪里打印？
我的 json 来自数据库，我想动态打印而不是使用静态 tag1 和 tag2
然后将 tag1 指定为您的服务器返回的任何内容
谁能解决这个问题？

标签： html angularjs arrays json

【解决方案1】：

根据数组tag1: ['first, second, third', 'text']的内容，tag1只包含两个元素，那么必须将第一个元素的内容分开，得到一个需要呈现的新矩阵。

使用：tag1[0].split(',')。

此演示适用于矩阵eventmetrics 中的多个元素。

类似这样的：

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.eventmetrics = [{
    _id: '57d439cf666a8d1080003e90',
    firstName: ['name', 'text'],
    lastName: ['last', 'text'],
    tag1: ['first,second,third', 'text'],
    userId: 1,
    tag2: ['file,second,third,fourth', 'text']
  }, {
    _id: '87d439cf666a8d1080003e55',
    firstName: ['name', 'text'],
    lastName: ['last', 'text'],
    tag1: ['first,second,third', 'text'],
    userId: 1,
    tag2: ['file,second,third,fourth, fifth', 'text']
  }]
});

#metrics {
  border: solid 1px #f00;
  margin: 2px;
  padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="plunker">
  <div ng-controller="MainCtrl">
    <div id="metrics" ng-repeat="em in eventmetrics">
      <h3 ng-bind="('_id: ' + em._id)"></h3>

      <div>
        <h4>tag1</h4>

        <ul>
          <li ng-repeat="tag1 in em.tag1[0].split(',')" ng-bind="tag1"></li>
        </ul>
      </div>
      <div>
        <h4>tag2</h4>

        <ul>
          <li ng-repeat="tag2 in em.tag2[0].split(',')" ng-bind="tag2"></li>
        </ul>
      </div>
    </div>
  </div>
</div>

【讨论】：

但我的 json 来自数据库，我想打印动态而不是使用静态 tag1 和 tag2
@Danny Fardy Jhonston 非常好的例子。它对我有用。
这是我的 plunker 链接，我在 html 文件的评论中提到了问题......所以请参考它......plnkr.co/edit/Trc1EP4A9ei9qM7YYWyB?p=preview

【解决方案2】：

假设eventmetrics 的长度总是== 0，您可以使用ng-repeat 进行类似的操作：

<ul>
  <li ng-repeat="text in eventmetrics[0].tag1"> {{ text }} </li>
</ul>


<ul>
  <li ng-repeat="text in eventmetrics[0].tag2"> {{ text }} </li>
</ul>

【讨论】：

【解决方案3】：

查看 Plunker 中的完整代码：

https://plnkr.co/edit/3TLG27?p=preview

<!DOCTYPE html>
<html ng-app="plunker">
 <head>
  <link rel="stylesheet" href="style.css">
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
  <script src="script.js"></script>
 </head>
 <body ng-controller="MainCtrl">
   <ul ng-repeat="y in eventmetrics">
    <div ng-repeat="(key,value) in y" ng-show="key=='contact'||key=='invitation'">
    <b>{{key}}</b>
     <li ng-repeat="x in value[0].split(',')">
      {{x}}  
     </li>
    </div>
   </ul>
 </body>
</html>

//script.js

var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
  $scope.eventmetrics = [
                    { 
                      _id: '57d439cf666a8d1080003e90',
                       firstName: [ 'name', 'text' ],
                       lastName: [ 'last', 'text' ],
                       invitation : ['first,second,third', 'text'],
                       userId: 1,
                       contact: ['file,second,third,fourth', 'text'] 
                     }
                 ];
    });

【讨论】：

但我的 json 来自数据库，我想打印动态而不是使用静态 tag1 和 tag2
再次推荐我的同一个 plunker。如果这是您正在寻找的。span>
是的，它可以工作，但它仍然是静态的......请再问一次我的问题，因为我现在做了编辑......谢谢你之前的建议。
如果我将命名空间作为标签放在联系人和邀请之前，这是可行的，但在视图方面我还想打印邀请和联系人，我该怎么办？
检查plnkr中的代码，它也会打印联系人和邀请。