Decoding JSON data in AngularJS

Question

Decoding JSON data in AngularJS

A json object has a key named lastLogin which holds a string value.

I am attempting to display the names John and Blake.

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

Link to JSFIDDLE for reference

Any assistance on this matter would be highly appreciated.

javascript json angularjs

Answer 1

Answer №1

Give this a try:

Example

<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 utilize angular.fromJson.

Here is an alternative method:

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

DEMO

Answer 2

Give this a try:

Example

<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 utilize angular.fromJson.

Here is an alternative method:

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

DEMO

Answer 3

Answer №2

When trying to properly parse the data

"lastlogin": "{\"employees\":[{\"firstName\":\"John\"},   {\"firstName\":\"Blake\"}]}"

, it is recommended to utilize the following code:

angular.fromJson(User.lastLogin);

Ensure that you provide the inner object, lastlogin, to the method in order for it to effectively remove any invalid characters like \ and " from the JSON data.

Answer 4

When trying to properly parse the data

"lastlogin": "{\"employees\":[{\"firstName\":\"John\"},   {\"firstName\":\"Blake\"}]}"

, it is recommended to utilize the following code:

angular.fromJson(User.lastLogin);

Ensure that you provide the inner object, lastlogin, to the method in order for it to effectively remove any invalid characters like \ and " from the JSON data.

Answer 5

Answer №3

I found a straightforward solution by using an angular filter.

Let's say you have a variable named category with the value

"{\"name\": \"Pankaj\" }"

. To display the value Pankaj, you can apply filters in the following manner.

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

The filter function looks like this:

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

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

Remember to include this file in the main index.html and pass it in the app.js route.

Answer 6

I found a straightforward solution by using an angular filter.

Let's say you have a variable named category with the value

"{\"name\": \"Pankaj\" }"

. To display the value Pankaj, you can apply filters in the following manner.

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

The filter function looks like this:

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

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

Remember to include this file in the main index.html and pass it in the app.js route.

Decoding JSON data in AngularJS

Answer №1

Answer №2

Answer №3

Similar questions

Is there a way to bring my popup closer to my button?

How to troubleshoot syntax errors when using the delete function in Three.js within Eclipse

What is the best way to conceal content within a URL while still transmitting it to the server using node.js and express?

I am receiving a high volume of row data from the server. What is the best way to present this information on a redirected page?

Can you attach a jQuery function to multiple CSS selectors at once?

Sending data from an Angular application using AJAX to FormSpree.io

Trouble retrieving all rows from mySQL to JSON Object, only receiving the first

Is there a promise specified in the render function of Express node.js?

Navigating File Paths in Node.js

Traversing data in SQL Server that has been transmitted from Angular AJAX requests

Is there a way to disable responsiveness on a website?

How to display a Bootstrap modal when clicking on buttons within a dynamic loop of <li> tags?

Tips for verifying the rendered view post data retrieval from an API in Vue JS

Implementing AJAX functionality in Codeigniter modulesTo integrate AJAX capabilities within Codeigniter modules

Convert a string to a scope object using Angular

Tips on how to define an ajax request for the PHP section that is being managed

HTML5 validation fails to activate

Mastering the A-Frame Game Loop: Tips for Separating Logic and Rendering

Error: The module cannot be located due to a recursion issue in resolving within the Angular application

Having trouble with linking an external JavaScript file inside the head tag?