CODEWITHSUNDEEP
javascriptangularjsarrays
Elamparithi.P
Elamparithi.P

Reputation: 149

Angularjs - ng-repeat not working for a single array?

I have below html code , its working fine for multiple array values , but for the first time array has single values , that time its not working .

My html code :

    <div ng-repeat="datas in data"">
        <div class="add-pic-box1 col-md-3" ng-repeat="img in datas.Url">
            <!-- <h1>{{datas.id}}</h1> -->
            <img  class="thumb" ng-model="add_new_ads_mdl.img_add" imgid = "{{img._id}}" src="{{img.url}}" />
            <span><i class="fa fa-times" ng-click="close_img(data.url._id)"></i></span>
        </div>
    </div>

This is my angular code which i try 

$scope.data = response;

the response has only one array object at first time , at first time only its not working.

First time i got this array :

   [

    Mainid: "589d8761ccd6d1231e5c3882",
    Url: 
    { 
            { 
              "url": 'images/product_images/file-1486718817763.jpeg',
              "_id": 589d8761ccd6d1231e5c3883 
            } 
    }
   ]

Its Not Working

Second time i got this array 

   [

    Mainid: "589d8761ccd6d1231e5c3882",
    Url: 
    { 
            { 
                "url": 'images/product_images/file-1486718817763.jpeg',
                "_id": 589d8761ccd6d1231e5c3883 
            },
            {
                "url":"images/product_images/file-1486731092357.png",
                "_id":"589db754375cdc4e8351f0be"
            } 
    }
   ]

Its working fine

Upvotes: 0

Views: 1081

Answers (2)

Faly
Faly

Reputation: 13356

Fix and refactor everything in the correct and better way:

  • Ensure correct json and array format: objects, that is in a array or not, have to be enclosed in curly braces. In your code, there is an object in your array that's not enclosed in curly braces:

Instead of this:

[
    Mainid: ...,
    Url: ...
]

It should be:

[
    {
        Mainid: ...,
        Url: ...
    }
]
  • Every character string must be inside quotes:

Instead of this:

"_id": 589d8761ccd6d1231e5c3883

It should be:

"_id": "589d8761ccd6d1231e5c3883"
  • Use array to represent list:

Instead of this:

Url: { 
        {
            "url": 'images/product_images/file-1486718817763.jpeg',
            "_id": '589d8761ccd6d1231e5c3883'
        }
     }

It should be:

Url: [ 
        {
            "url": 'images/product_images/file-1486718817763.jpeg',
            "_id": '589d8761ccd6d1231e5c3883'
        }
     ]
  • Name variables in a better way, for instance datas for the array, and data for each element in the array.

You then get everything working and readable:

<!DOCTYPE html>
<html>
    <head>
        <script src="js/angular.min.js"></script>          
        <script>            
            var app = angular.module("myApp", []);          
            app.controller("myCtrl", function ($scope) {                
                $scope.datas = [ { 
                                    Mainid: "589d8761ccd6d1231e5c3882",
                                    Url: [ 
                                             {  
                                                "url":'images/product_images/file-1486718817763.jpeg',
                                                "_id": '589d8761ccd6d1231e5c3883'
                                             }
                                         ]
                                 }
                               ];   
                console.log($scope.datas);
            });
        </script>   
    </head>

    <body ng-app="myApp" ng-controller="myCtrl">
        <div ng-repeat="data in datas">
            <div class="add-pic-box1 col-md-3" ng-repeat="img in data.Url">             
                <img  class="thumb" ng-model="add_new_ads_mdl.img_add" imgid = "{{img._id}}" src="{{img.url}}" />
                <span><i class="fa fa-times" ng-click="close_img(data.url._id)"></i></span>
            </div>
        </div>
    </body>
</html>

Upvotes: 2

Dani&#235;l Camps
Dani&#235;l Camps

Reputation: 1809

I think you simply need to put brackets around your arrays, it look to me like they are JavaScript object and not arrays. Give the following a try (note the square brackets):

Mainid: "589d8761ccd6d1231e5c3882",
Url: 
[ 
        { 
          "url": 'images/product_images/file-1486718817763.jpeg',
          "_id": 589d8761ccd6d1231e5c3883 
        } 
]

Its Not Working

Second time i got this array

Mainid: "589d8761ccd6d1231e5c3882",
Url: 
[
        { 
            "url": 'images/product_images/file-1486718817763.jpeg',
            "_id": 589d8761ccd6d1231e5c3883 
        },
        {
            "url":"images/product_images/file-1486731092357.png",
            "_id":"589db754375cdc4e8351f0be"
        } 
]

Upvotes: 1

Related Questions