multidimensional array in angular have issue

Question

What is the issue in my code?

return array is

{"records":
    [{"Status":"1",
    "Date":"2017-07-14 10:46:33",
    "Email":"[email protected]","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]

Cultti · Accepted Answer · 2017-07-19 13:26:23Z

2

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": "[email protected]",
    "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.

edited Jul 19, 2017 at 13:26

answered Jul 19, 2017 at 8:47

Cultti

914 bronze badges

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

2 Comments

Deepak3301086 Over a year ago

Thanks for reply, but if i remove quotes in attachment then all code is not working. means first ng-repeate also not work

Cultti Over a year ago

Try using double quotes instead of single. Single quotes are not considered as valid JSON. I have edited my answer

Sachila Ranawaka · Accepted Answer · 2017-07-19 08:51:32Z

1

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":"[email protected]",
         "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>

answered Jul 19, 2017 at 8:51

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

3 Comments

Deepak3301086 Over a year ago

I get this string from url

Deepak3301086 Over a year ago

angular.module("requestModel", []) .controller("requestCtrl", function($scope, $http) { $http.get("all_request").then(function(response) { $scope.values = response.data.records; }); });

Sachila Ranawaka Over a year ago

@Deepak3301086 nice. make sure to check as answer if this helped

Collectives™ on Stack Overflow

multidimensional array in angular have issue

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related