Angular js Parsing Json object

Question

A json object has a key lastLogin. Value of it is a string.

I am trying to print firstName John and Blake

$scope._users = [{
        "User": {
            "userid": "dummy",
            "lastlogin": "{\"employees\":[{\"firstName\":\"John\"},   {\"firstName\":\"Blake\"}]}",
        }
    }];

FIDDLE

Any help would be appreciated.

Pet peeve: There are no JSON objects in JavaScript. There are objects, and there are JSON strings. $scope._users[0] is an example of an object (not JSON object). $scope._users[0].User.lastlogin is an example of a JSON string. — Amadan
– Amadan, Commented Jul 9, 2015 at 2:33

Anik Islam Abhi · Accepted Answer · 2016-11-07 04:28:55Z

24

Try like this

View

<div ng-controller="MyCtrl">
    <div ng-repeat="user in _users" ng-init="myInfo=parJson(user.User.lastlogin)">
        <div ng-repeat="emp in myInfo.employees">{{emp.firstName}}</div>
    </div>
</div>

Controller

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

function MyCtrl($scope) {
    $scope.getName = function (user) {
        return "Names";
    };

    $scope._users = [{
        "User": {
            "userid": "dummy",
                "lastlogin": "{\"employees\":[{\"firstName\":\"John\"},                   {\"firstName\":\"Blake\"}]}",
        }
    }];
    $scope.parJson = function (json) {
        return JSON.parse(json);
    }
    //console.log(JSON.parse($scope._users[0].User.lastlogin));
}

DEMO

you can also use angular.fromJson.

Like this

$scope.parJson = function (json) {
   return angular.fromJson(json);
}

DEMO

edited Nov 7, 2016 at 4:28

answered Jul 9, 2015 at 2:41

Anik Islam Abhi

25.4k8 gold badges61 silver badges82 bronze badges

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

4 Comments

Daniel Nalbach Over a year ago

Anik, why would you use JSON.parse instead of the built-in angular.fromJson?

Anik Islam Abhi Over a year ago

@DanielNalbach , does it make any big difference between JSON.parse and angular.fromJson ?

Daniel Nalbach Over a year ago

Not really, angular.fromJson is just a wrapper over JSON.parse with a string check to prevent double parsing. I thought it did more, but checked the source, and that's it.

Dimitris Over a year ago

cool, any idea how that could be bidirectional? (e.g. for form fields)

Anonymous · Accepted Answer · 2017-01-10 13:20:13Z

4

To parse "lastlogin": "{\"employees\":[{\"firstName\":\"John\"}, {\"firstName\":\"Blake\"}]}" data correctly you can use

angular.fromJson(User.lastLogin);

Just make sure that you are giving inner object i.e. lastlogin to the method and it will remove all invalid characters such as \ and " from the json data.

answered Jan 10, 2017 at 13:20

Anonymous

1,7734 gold badges29 silver badges50 bronze badges

Comments

Pankaj Tanwar · Accepted Answer · 2022-01-27 14:16:35Z

A simple method using angular filter worked for me.

Suppose, you have a variable category which has value "{\"name\": \"Pankaj\" }". Now, I need to show the value Pankaj , for this I can use filters in this way.

<p>{{ category | nameFilter : category }}</p>

In filter filter -

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

.filter('nameFilter', function() {
    return function(input, total) {
        return JSON.parse(input).name;
    };
})

Don't forget to import this file in main index.html file and pass in app.js route.

Collectives™ on Stack Overflow

Angular js Parsing Json object

3 Answers 3

4 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Linked

Related