multidimensional array in angular have issue - php

Question

What is the issue in my code?
return array is
{"records":
[{"Status":"1",
"Date":"2017-07-14 10:46:33",
"Email":"cy#gmail.com","Company":"Inc.",
"Model":"Model 8081 A","Animation":"Walk, Turn Around","id":"1",
"Note":"This is a new request for model with animation.",
"Attachment":
"[{'url':'request/31a.jpg','name':'a.jpg'},{'url':'request/42Light.png','name':'Light.png'}]"
}]
}
And HTML code is
<tr ng-repeat="x in records">
<td>{{x.Status}}</td>
<td>{{x.Date}}</td>
<td>{{x.Email}}</td>
<td>{{x.Company}}</td>
<td>{{x.Model}}</td>
<td>{{x.Animation}}</td>
<td>{{x.Note}}</td>
<td>
<table>
<tr ng-repeat="lnk in x.Attachment">
<td>{{lnk.url}}</td>
<td>{{lnk.name}}</td>
</tr>
</table>
</td>
</tr>
lnk.url and lnk.name print nothing.
Error in console is [ngRepeat:dupes]

Answer 1

Your attachment is not an array, it is a string. Your return array should be like this:
{
"records": [{
"Status": "1",
"Date": "2017-07-14 10:46:33",
"Email": "cy#gmail.com",
"Company": "Inc.",
"Model": "Model 8081 A",
"Animation": "Walk, Turn Around",
"id": "1",
"Note": "This is a new request for model with animation.",
"Attachment": [{
"url": "request/31a.jpg",
"name": "a.jpg"
}, {
"url": "request/42Light.png",
"name": "Light.png"
}]
}]
}
(Notice removed quotes in Attachment).
So you should convert Attachment with JSON.parse() function in your controller.

Answer 2

Attachment is a string not an array. convert it to an array and it will l work
angular.module("app",[])
.controller("ctrl",function($scope){
$scope.records = [
{
"Status":"1",
"Date":"2017-07-14 10:46:33",
"Email":"cy#gmail.com",
"Company":"Inc.",
"Model":"Model 8081 A",
"Animation":"Walk, Turn Around",
"id":"1",
"Note":"This is a new request for model with animation.",
"Attachment":[{'url':'request/31a.jpg','name':'a.jpg'},{'url':'request/42Light.png','name':'Light.png'}]
}
]
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<table>
<tr ng-repeat="x in records">
<td>{{x.Status}}</td>
<td>{{x.Date}}</td>
<td>{{x.Email}}</td>
<td>{{x.Company}}</td>
<td>{{x.Model}}</td>
<td>{{x.Animation}}</td>
<td>{{x.Note}}</td>
<td>
<table>
<tr ng-repeat="lnk in x.Attachment">
<td>{{lnk.url}}</td>
<td>{{lnk.name}}</td>
</tr>
</table>
</td>
</tr>
</table>
</div>