Reading the JSON values using Javascript/Angular

Question

Hi i am getting the following response from server

{
    "Application1": {
        "status": "SUCCESS",
        "comment": "A123456 added successfully to Application"
    },
    "Application2": {
        "status": "SUCCESS",
        "comment": "B67890 added successfully to Application"
    }
}

i need to show a message based on the status , we are using angular and javascript i am unable to loop through and read the same, any help would be appreciated

It is good to add the code snippet that shows how and what you are looping ? so that one can understand what exactly your problem is. — Sagar
– Sagar, Commented May 22, 2015 at 5:32

egellon · Accepted Answer · 2015-05-22 05:36:39Z

1

The simpliest version i can imagine:

<script>
var json = {"Application1":{"status":"SUCCESS","comment":"A123456 added successfully to Application"},"Application2":{"status":"SUCCESS","comment":"B67890 added successfully to Application"}};

for(var t in json)
    console.log(json[t]['status']);
</script>

answered May 22, 2015 at 5:36

egellon

2701 silver badge9 bronze badges

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

2 Comments

user1767986 Over a year ago

worked for me simple and preicisily what i was looking

user1707873 Over a year ago

don't usually forget to add the hasOwnProperty check while iterating using for in loop , else prototype chain would also be examined :)

Peter Rasmussen · Accepted Answer · 2015-05-22 05:32:12Z

1

You can read the values by parsing the string as json:

var obj = JSON.parse('{"Application1":{"status":"SUCCESS","comment":"A123456 added successfully to Application"},"Application2":{"status":"SUCCESS","comment":"B67890 added successfully to Application"}}')

Then you can get access the values as properties:

obj.Application1.status

answered May 22, 2015 at 5:32

Peter Rasmussen

17k8 gold badges50 silver badges64 bronze badges

Comments

Valarpirai · Accepted Answer · 2015-05-22 05:33:34Z

First check the response is JSON object or string. If it is string, parse it to JSON. Then you can loop through it.

Use the following functions

isJson(your_response);

will return the JSON object or null.

  var whatIsIt = function (object) {
    var stringConstructor = "test".constructor;
    var arrayConstructor = [].constructor;
    var objectConstructor = {}.constructor;

    if (object === null) {
        return "null";
    }
    else if (object === undefined) {
        return "undefined";
    }
    else if (object.constructor === stringConstructor) {
        return "String";
    }
    else if (object.constructor === arrayConstructor) {
        return "Array";
    }
    else if (object.constructor === objectConstructor) {
        return "Object";
    }
    else {
        return "don't know";
    }
};

 var isJson = function(o1)
    {
        // Validate JSON strings
        var json_object = null;
        var type = whatIsIt(o1);
        switch(type)
        {
            case "String":
                try{
                    json_object = JSON.parse(o1);
                }catch (e){
                    return null;
                }
                break;
            case "Object":
                try {
                    JSON.stringify(o1);
                    json_object = o1;
                }catch (e) {
                    return null;
                }
                break;
        }
        return json_object;
    };

user1707873 · Accepted Answer · 2015-05-22 06:07:57Z

Assuming that the communication with the server is carried out in a separate angular service, you need to use ng-repeat and ng-if directives, Please find the JSFiddle here : http://jsfiddle.net/2ju3c6tc/1/

var module = angular.module("myModule", []);

module.service('serverCommunicator', ['$http',
  function($http) {
    //code to get the data from the server
    //server Data would hold the JSON object after the AJAX req,however, it is assigned manually over here
    this.serverData = {
      "Application1": {
        "status": "SUCCESS",
        "comment": "A123456 added successfully to Application"
      },
      "Application2": {
        "status": "SUCCESS",
        "comment": "B67890 added successfully to Application"
      }
    };
  }
]);

module.controller('myController', ['$scope', 'serverCommunicator',
  function($scope, serverCommunicator) {
    $scope.serverData = serverCommunicator.serverData;

  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<div ng-app="myModule">
  <div ng-controller="myController as myCont">
    <div ng-repeat="dataElement in serverData">
      <div ng-if="dataElement.status=='SUCCESS'">
        This is success message :{{dataElement.comment}}
      </div>
      <div ng-if="dataElement.status=='FAILURE'">
        This is failure message {{dataElement.comment}}
      </div>
    </div>
  </div>
</div>

perhaps, this was an overkill for your requirement from the answers that I see :)

Collectives™ on Stack Overflow

Reading the JSON values using Javascript/Angular

4 Answers 4

2 Comments

Comments

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

1 Comment

Related