Angular ng-repeat dynamic array of objects

Question

Given a json of array of objects, how could one display it using a ng-repeat dynamically? error key is static / always remain the same. Just the values of error changes. So if I have the password field errored-out then I'll have password key instead on the error

{ 
  "error":  {
    "firstName": {
      "0": "The first name field is required.",
      "1": "The first name field must have 2-5 characters."
    },
    "lastName": {
      "0": "The last name field is required."
    }
  }
}

.

{ 
  "error":  {
    "password": {
      "0": "The password field is required."
    }
  }
}

I tried doing:

<ul ng-repeat="message in errormessage">
    <li ng-repeat="(k,v) in message">
         {{k}} - {{v}}
    </li>
</ul>

But it displays this instead:

0 - [
0 - ]

Your JSON is not valid.

Mamun
– Mamun

2017-03-20 03:27:28 +00:00
Commented Mar 20, 2017 at 3:27 — Mamun
– Mamun, Commented Mar 20, 2017 at 3:27
How come it is not a valid JSON?

basagabi
– basagabi

2017-03-20 03:28:58 +00:00
Commented Mar 20, 2017 at 3:28 — basagabi
– basagabi, Commented Mar 20, 2017 at 3:28
Just try it with a online validator.

Mamun
– Mamun

2017-03-20 03:29:46 +00:00
Commented Mar 20, 2017 at 3:29 — Mamun
– Mamun, Commented Mar 20, 2017 at 3:29
Try it again. There are 2 json there. Not one.

basagabi
– basagabi

2017-03-20 03:30:21 +00:00
Commented Mar 20, 2017 at 3:30 — basagabi
– basagabi, Commented Mar 20, 2017 at 3:30
That's right then.

Mamun
– Mamun

2017-03-20 03:31:10 +00:00
Commented Mar 20, 2017 at 3:31 — Mamun
– Mamun, Commented Mar 20, 2017 at 3:31

ajai Jothi · Accepted Answer · 2017-03-20 03:31:19Z

2

angular.module('app', [])
  .controller('SampleCtrl', function($scope) {
    $scope.errormessage = {
      "error": {
        "firstName": {
          "0": "The first name field is required.",
          "1": "The first name field must have 2-5 characters."
        },
        "lastName": {
          "0": "The last name field is required."
        },
        "passowrd": {
          "0": "The password field is required."
        }
      }
    };
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="SampleCtrl">

  <ul ng-repeat="message in errormessage">
    <li ng-repeat="(k,v) in message">
      <b>{{k}}:</b><br>
      <ul>
        <li ng-repeat="err in v">
          {{err}}
        </li>
      </ul>
    </li>
  </ul>
</div>

answered Mar 20, 2017 at 3:31

ajai Jothi

2,3041 gold badge10 silver badges16 bronze badges

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

3 Comments

basagabi Over a year ago

Seems weird that it is returning a string instead of an array. Something like this

{"error":{"firstName":{"0":"The first name field is required.","1":"The first name field must have 2-5 characters."},"lastName":{"0":"The last name field is required."},"passowrd":{"0":"The password field is required."}}}

basagabi Over a year ago

And having this error Error: ngRepeat:dupes Duplicate Key in Repeater using the track by $index displays each letter as an array though.

ajai Jothi Over a year ago

it sounds like you are looping through a string instead of valid object. You may need to parse the JSON string. use JSON.parse(YOUR_ERROR_RESPONSE)

diazd2 · Accepted Answer · 2017-03-20 03:31:22Z

0

Make sure you are using the ng-repeat on the right object. You have:

ng-repeat="message in errormessage"

and the content of errormessage seems to be "[]". See http://jsfiddle.net/hgk6vsqv/

answered Mar 20, 2017 at 3:31

diazd2

1

1 Comment

K Scandrett Over a year ago

Better to explain what is needed to make it work, than to set up a demo of something not working. They already have a non-working version

Rohìt Jíndal · Accepted Answer · 2017-03-20 06:34:54Z

Some observations :

Given a json of array of objects. Your JSON is not an array of Objects.
Try this ng-repeat="message in errormessage.error" instead of ng-repeat="message in errormessage"

DEMO

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

myApp.controller('MyCtrl',function($scope) {
    $scope.errormessage = { 
  "error":  {
    "firstName": {
      "0": "The first name field is required.",
      "1": "The first name field must have 2-5 characters."
    },
    "lastName": {
      "0": "The last name field is required."
    }
  }
}

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
 <ul ng-repeat="message in errormessage.error">
    <li ng-repeat="(k,v) in message">
         {{k}} - {{v}}
    </li>
</ul>
</div>

Ricardo Pontual · Accepted Answer · 2017-03-20 11:21:37Z

EDIT

I think the first thing you have to consider is to normalize your json if you have control over that and represent it like this

$scope.errormessage = {
  "error": {
        "firstName": {
            "0": "The first name field is required.",
            "1": "The first name field must have 2-5 characters."
        },
        "lastName": {
            "0": "The last name field is required."
        },
        "passowrd": {
             "0": "The password field is required."
        },
        "mail": {
            "0": "The first name field is required.",
            "1": "The first name field must have 2-5 characters."
        },
        "newsletter": {
             "0": "The newsletter field is required."
        },
        "address": {
             "0": "The address field is required."
        }
    }
}

Why this because you cant have two field named error on a same object or array. After this the first solution provided must work

<div ng-app="app" ng-controller="SampleCtrl">
    <ul ng-repeat="message in errormessage">
       <li ng-repeat="(k,v) in message">
         <b>{{k}}:</b><br>
         <ul>
            <li ng-repeat="err in v">
             {{err}}
            </li>
         </ul>
       </li>
    </ul>
</div>

Collectives™ on Stack Overflow

Angular ng-repeat dynamic array of objects

4 Answers 4

3 Comments

1 Comment

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

1 Comment

Comments

Comments

Related