How i will parse this json in angular js html

Question

This is the json the format i received and i want to print the msg and the username field..How to do that? and also want to format the date in Y-m-d format...how i will acheive it..i have tried ng- repeat but i couldnt print the data ..so please help me to print this json array in 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
}

show you html code

Sachila Ranawaka
– Sachila Ranawaka

2017-05-11 10:26:34 +00:00
Commented May 11, 2017 at 10:26 — Sachila Ranawaka
– Sachila Ranawaka, Commented May 11, 2017 at 10:26
simple <ul><li></li></ul> @sachilaranawaka

Rahul
– Rahul

2017-05-11 10:28:06 +00:00
Commented May 11, 2017 at 10:28 — Rahul
– Rahul, Commented May 11, 2017 at 10:28

Sachila Ranawaka · Accepted Answer · 2017-05-11 10:39:21Z

1

add the ng-repeat1 like this withdate` filter

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

edited May 11, 2017 at 10:39

answered May 11, 2017 at 10:32

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sachila Ranawaka Over a year ago

@Samim change the filter like this {{item.ts | date : 'yyyy-M-d h:mm:ss '}}

Sachila Ranawaka Over a year ago

@Samim no problem. if this helped, please upvote and mark as right answer cheers :D

Pengyy · Accepted Answer · 2017-05-11 10:31:12Z

ng-repeat is actually what you want here. and for date formatting, you can use date filter.

refer below example.

angular.module("app", [])
  .controller("myCtrl", function($scope) {
    $scope.data = {
      "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.6.4/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
  <ul>
    <li ng-repeat="item in data.messages">
      <span>{{item.msg}}</span>
      <span>{{item.u.username}}</span>
      <span>{{item.ts | date: 'yyyy-MM-dd'}}</span>
    </li>
    <ul>
</div>

Collectives™ on Stack Overflow

How i will parse this json in angular js html

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related