0

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

Improve this question
10
  • 1
    show your response array Commented Feb 10, 2017 at 12:14
  • Is response really an Array at the "first time" ? Commented Feb 10, 2017 at 12:14
  • 1
    It might be $scope.data = response.data;, show you ajax code.. Commented Feb 10, 2017 at 12:15
  • 'Mainid: "589d8761ccd6d1231e5c3882", Url: { { "url": 'images/product_images/file-1486718817763.jpeg', "_id": 589d8761ccd6d1231e5c3883 } } ' Commented Feb 10, 2017 at 12:17
  • the array has the above values Commented Feb 10, 2017 at 12:17

2 Answers 2

Reset to default
2

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>
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

i fix it now , tx for u big help :)
1

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"
        } 
]
Improve this answer

3 Comments

i think its not a correct solution , again look my question pls
You are looping through 'datas.Url', for this, Therefore, each 'Url' property in each 'datas' object needs to be an array (hence the square brackets). You have declared Url as an object, with curly brackets, whereas it should be an array with square brackets. Angular now only recognizes a JS object. Apparently angular recognizes your second example, but as far as I know this is not the standard method of declaring arrays in JavaScript, and it is definitively not correct for a single object
tx for helping me ... tx a lot :)

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.