current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Sign up ×
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other. Join them; it only takes a minute:
up vote 0 down vote favorite

I'm modifying the Altair Material Design Template (http://themeforest.net/item/altair-admin-material-design-premium-template/12190654) & have the following Angular JS controller.

I am successfully calling an API & creating variables in the for loop. I want to then write them to $scope.dragulaItems. This seems to work fine in the console log, however the array is not displaying properly on the page.

The html div is as follows:

            <div class="uk-grid uk-grid-width-small-1-2 uk-grid-width-medium-1-3 uk-grid-width-large-1-5" data-uk-grid-margin dragula='"first-dragula"' dragula-model='dragulaItems'>
            <div ng-repeat="item in dragulaItems">

I am seeing the correct number of returns in the response on the page (20 styled divs), but no content within them.

angular
.module('altairApp',[angularDragula(angular)])
.controller('addResultsCtrl', [
    '$scope',
    '$rootScope',
    'utils',

    function ($scope,$rootScope,utils) {

        // Search

        SessionKey = "YXZmLwmNiT3vTuXwbbQrSY8ibrGhLuWLZag3DCCH2zu7w9dO3b";

        $("#addSearch").submit(function(event) {
            event.preventDefault();
            var searchTerm = $("#addSearch-term").val();
            var settings = {
              "async": true,
              "crossDomain": true,
              "url": "https://secure.techfor.com/labsapi/restservice.aspx?command=PRODUCTSEARCH&searchtext="+searchTerm+"&extendedinfo=n&page=1&sessionkey="+SessionKey+"",
              "method": "GET",
              "headers": {
                "cache-control": "no-cache",
              }
            }
            $.ajax(settings).done(function (response) {
                //console.log(response);
                $("#searchTerm").html(searchTerm);
                $scope.dragulaItems = [];
                for (i in response.Products) {
                    var name = response.Products[i].Name;
                    var imagePath = response.Products[i].ImagePath;
                    var EAN = response.Products[i].EANBarcode;
                    var price = response.Products[i].Price;
                    var offer = response.Products[i].OfferPromotion;
                    var offerValid = response.Products[i].OfferValidity;
                    $scope.dragulaItems.push ("{\"Name\": \""+name+"\",\"Price\": \""+price+"\",\"EANBarcode\": \""+EAN+"\",\"ImagePath\": \""+imagePath+"\",\"OfferPromotion\": \""+offer+"\",\"OfferValidity\": \""+offerValid+"\"}");
                }
                console.log($scope.dragulaItems); 
            });

        });

    }

]);

If I manually change the $scope.dragulaItems = []; to say:

$scope.dragulaItems = [
{"Name":"Bob"},
{"Name":"Reggie"}
];

I get a return of 2 items with the Name field correctly displayed. I am confused as clearly the fact that there are 20 items in the array is getting through, but the content within them is not.

share|improve this question
1  
Do not use for ... in for iterating through arrays! – Vohuman 20 hours ago
up vote 2 down vote accepted

You are adding items to the array the wrong way. You need to create a javascript object and set the different property values like Name and Price etc and push that object to your array.

Try this.

for (var i in response.Products) {

  var name = response.Products[i].Name;
  var price = response.Products[i].Price;
  var eanBarCode= response.Products[i].EANBarcode;

  var item = { Name : name , Price : price, EANBarcode: eanBarCode };
  $scope.dragulaItems.push(item);

}

Or you may use angular.forEach for looping.

angular.forEach(response.Products, function(value, key) {

  var name = value.Name;
  var price = value.Price;
  var eanBarCode = value.EANBarcode;

  var item = { Name : name , Price : price, EANBarcode: eanBarCode };
  $scope.dragulaItems.push(item);

});
share|improve this answer
    
Brilliant! I knew it was simple. There goes a wasted evening! – Mr T 20 hours ago
up vote 1 down vote

You are pushing the wrong items into the array.

You have to push objects into the array, not strings which are displayed like objects:

for (i in response.Products) {
  var data = {};
  data.Name = response.Products[i].Name;
  data.ImagePath = response.Products[i].ImagePath;
  data.EAN = response.Products[i].EANBarcode;
  data.Price = response.Products[i].Price;
  data.Offer = response.Products[i].OfferPromotion;
  data.OfferValid = response.Products[i].OfferValidity;
  $scope.dragulaItems.push (data);
}
share|improve this answer
    
This doesn't seem to work for me. The data object returns as data {} – Mr T 14 hours ago
    
data would be {} outside the scope of the for loop, but it should work inside the for loop. – Avijit Gupta 12 hours ago

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.