Writing Array To $scope (Javascript)

Question

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.

Do not use for ... in for iterating through arrays!

Ram
– Ram

2015-12-18 03:16:44 +00:00
Commented Dec 18, 2015 at 3:16 — Ram
– Ram, Commented Dec 18, 2015 at 3:16

Shyju · Accepted Answer · 2015-12-18 03:28:35Z

2

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);

});

edited Dec 18, 2015 at 3:28

answered Dec 18, 2015 at 3:12

Shyju

220k106 gold badges420 silver badges499 bronze badges

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

1 Comment

Mr T Over a year ago

Brilliant! I knew it was simple. There goes a wasted evening!

Avijit Gupta · Accepted Answer · 2015-12-18 03:15:04Z

1

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);
}

answered Dec 18, 2015 at 3:15

Avijit Gupta

5,7863 gold badges24 silver badges36 bronze badges

2 Comments

Mr T Over a year ago

This doesn't seem to work for me. The data object returns as data {}

Avijit Gupta Over a year ago

data would be {} outside the scope of the for loop, but it should work inside the for loop.

Collectives™ on Stack Overflow

Writing Array To $scope (Javascript)

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related