我将如何在角度js html中解析这个json

时间:2017-05-11 10:23:11

标签: angularjs json

这是我收到的格式的json,我想打印msg和用户名字段。怎么做? 并且还希望以Ymd格式格式化日期...我将如何实现它...我已经尝试了ng-重复但我无法打印数据..所以请帮我打印这个json数组在angualar js html

HTML

<ul>
<li>msg</li>
<li>date</li>
</ul>

{
  "messages": [
    {
      "_id": "sdfsdfsd",
      "t": "subscription-role-removed",
      "rid": "sdfsfsfd",
      "ts": "2017-05-10T07:03:26.865Z",
      "msg": "samim",
      "u": {
        "_id": "sdfdsf",
        "username": "dsdfsfsd"
      },
      "groupable": false,
      "role": "moderator",
      "_updatedAt": "2017-05-10T07:03:26.865Z"
    },
    {
      "_id": "sdfsdfsdfssd",
      "t": "subscription-role-added",
      "rid": "asdafdaf",
      "ts": "2017-05-10T06:51:23.147Z",
      "msg": "samim",
      "u": {
        "_id": "ssdfsdf",
        "username": "adfffffsfmin"
      },
      "groupable": false,
      "role": "moderator",
      "_updatedAt": "2017-05-10T06:51:23.147Z"
    },
    {
      "_id": "fafasfasf",
      "t": "au",
      "rid": "sdfsdfsfsdf",
      "ts": "2017-05-10T06:50:14.029Z",
      "msg": "samim",
      "u": {
        "_id": "sdfsdfsdfsdf",
        "username": "sdfsdfsd"
      },
      "groupable": false,
      "_updatedAt": "2017-05-10T06:50:14.036Z"
    },
    {
      "_id": "sfdsfsdfsd",
      "rid": "sfsdfsdfs",
      "msg": "hi",
      "ts": "2017-05-10T06:44:27.610Z",
      "u": {
        "_id": "sdfsdfsdf",
        "username": "sfsdfsdf"
      },
      "_updatedAt": "2017-05-10T06:44:27.611Z"
    },
    {
      "_id": "sdfsdfsd",
      "rid": "sdfsdfsdfsdf",
      "msg": "hello",
      "ts": "2017-05-10T06:38:10.509Z",
      "u": {
        "_id": "sdfsdfsd",
        "username": "sdfsdfsdsdf"
      },
      "_updatedAt": "2017-05-10T06:38:10.514Z"
    }
  ],
  "success": true
}

1 个答案:

答案 0 :(得分:1)

添加ng-repeat1 like this with日期过滤器

<ul ng-repeat="item in arr.messages">

 <li>
     {{item.u.username}}
 </li>
 <li>
     {{item.ts  | date : 'yyyy-M-d'}}
 </li>
 </ul>

angular.module("app",[])
.controller("ctrl",function($scope){
$scope.arr = {
  "messages": [
    {
      "_id": "sdfsdfsd",
      "t": "subscription-role-removed",
      "rid": "sdfsfsfd",
      "ts": "2017-05-10T07:03:26.865Z",
      "msg": "samim",
      "u": {
        "_id": "sdfdsf",
        "username": "dsdfsfsd"
      },
      "groupable": false,
      "role": "moderator",
      "_updatedAt": "2017-05-10T07:03:26.865Z"
    },
    {
      "_id": "sdfsdfsdfssd",
      "t": "subscription-role-added",
      "rid": "asdafdaf",
      "ts": "2017-05-10T06:51:23.147Z",
      "msg": "samim",
      "u": {
        "_id": "ssdfsdf",
        "username": "adfffffsfmin"
      },
      "groupable": false,
      "role": "moderator",
      "_updatedAt": "2017-05-10T06:51:23.147Z"
    },
    {
      "_id": "fafasfasf",
      "t": "au",
      "rid": "sdfsdfsfsdf",
      "ts": "2017-05-10T06:50:14.029Z",
      "msg": "samim",
      "u": {
        "_id": "sdfsdfsdfsdf",
        "username": "sdfsdfsd"
      },
      "groupable": false,
      "_updatedAt": "2017-05-10T06:50:14.036Z"
    },
    {
      "_id": "sfdsfsdfsd",
      "rid": "sfsdfsdfs",
      "msg": "hi",
      "ts": "2017-05-10T06:44:27.610Z",
      "u": {
        "_id": "sdfsdfsdf",
        "username": "sfsdfsdf"
      },
      "_updatedAt": "2017-05-10T06:44:27.611Z"
    },
    {
      "_id": "sdfsdfsd",
      "rid": "sdfsdfsdfsdf",
      "msg": "hello",
      "ts": "2017-05-10T06:38:10.509Z",
      "u": {
        "_id": "sdfsdfsd",
        "username": "sdfsdfsdsdf"
      },
      "_updatedAt": "2017-05-10T06:38:10.514Z"
    }
  ],
  "success": true
}

})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
 <ul ng-repeat="item in arr.messages">
 
 <li>
     {{item.u.username}}
 </li>
 <li>
     {{item.ts  | date : 'yyyy-M-d h:mm:ss '}}
 </li>
 </ul> 
</div>