Angular array does not have the expected outcome

Question

Am trying to get element from array. But here is unexpected outcome.

<div ng-repeat="item in widget['ui_component_format']">
       {{ item }}
        <div ng-repeat="itemEl in item track by $index">
            {{ itemEl }}
        </div>
 </div>

The output like

["projectNumber", "projectName", "percentComplete", "projectAmountFormatted"]
[


[

"

p

r

o

j

e

c

t

N

u

m

b

e

r

"

,

"

p

r

o

j

e

c

t

N

a

m

e

"

so on

"
]

While I want it like this:

projectNumber
projectName
percentComplete
projectAmountFormatted

Answer 1

It happens because you think your array is an array object, but is actually a string (and thus each item is a char). Have a function in your controller that runs it through JSON.parse method:

<div ng-repeat="item in widget['ui_component_format']">
       {{ item }}
        <div ng-repeat="itemEl in getJSONitem(item) track by $index">
            {{ itemEl }}
        </div>
 </div>

Controller:

$scope.getJSONitem = function(item) {
    return JSON.parse(item);
}

Fiddle