How to loop through complex json object

Question

I am receiving complex JSON object from server side. I have no idea how to loop through such an object. Here's the object.

"message": {
        "name": ["Name cannot be blank."],
        "contact_person": ["Contact Person cannot be blank."],
        "username": ["Username cannot be blank."]
    },

I am using angularjs and using ng-repeat to iterate through.

<div style="color: red;" ng-repeat="err in message">{{err}}</div>

where message is. $scope.message=justdata.message and this is what I get:

How can I format it in proper way. Please help me out!

Could you show a little more of your json and what do you want to archieve? — ochs.tobi
– ochs.tobi, Commented May 18, 2018 at 6:32
Since your error messages are in an array loop through key/value of the message object and print value[0]: <div style="color: red;" ng-repeat="(key, value) in message">{{value[0]}}</div> — Kavindra
– Kavindra, Commented May 18, 2018 at 6:33
@Kavindra, that seems to be working with {{value[$index]}} also. I'll test more possibilities. THanks — Steve
– Steve, Commented May 18, 2018 at 6:38

Sudhir Ojha · Accepted Answer · 2018-05-18 06:46:20Z

This is working fine for me you need to have nested ng-repeat inside div because you error message is coming in list. You have to again loop through it. Like following:

 <div style="color: red;" ng-repeat="err in message">
      <span ng-repeat="val in err">
        {{val}}
      </span>
    </div>

Here is working code

<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<div style="color: red;" ng-repeat="err in message">
  <span ng-repeat="val in err">
    {{val}}
  </span>
</div>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.message =  {
        "name": ["Name cannot be blank."],
        "contact_person": ["Contact Person cannot be blank."],
        "username": ["Username cannot be blank."]
    };
});
</script>

</body>
</html>

Josh McMillan · Accepted Answer · 2018-05-18 06:33:54Z

0

Given that you seemingly want to output a list of error messages, I would pre-process $scope.message to just be an array of strings. Something like this should do the trick:

var payload = {
  "message": {
    "name": ["Name cannot be blank."],
    "contact_person": ["Contact Person cannot be blank."],
    "username": ["Username cannot be blank."]
  }
};

$scope.errors = [].concat.apply([], Object.values(payload.message));

This will populate $scope.errors with an array of error messages, that you can then iterate through using ng-repeat.

answered May 18, 2018 at 6:33

Josh McMillan

7343 silver badges8 bronze badges

Comments

Manish Balodia · Accepted Answer · 2018-05-18 06:40:09Z

0

Try this:-

<div style="color: red;" ng-repeat="err in message">{{err[0]}}</div>

answered May 18, 2018 at 6:40

Manish Balodia

1,8752 gold badges24 silver badges38 bronze badges

2 Comments

Steve Over a year ago

Can you explain, what's the use of [0]?

Manish Balodia Over a year ago

its type is Array and its length is 1 so you can access its value on 0 index.

Collectives™ on Stack Overflow

How to loop through complex json object

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related