Build div with valid ng-click action from JSON response

Question

I'm trying to build multiple divs from an ajax response. The following is the module that I'm using.

angular.module('appBuyItemModule', [])
    .controller('buyItemController', ['$scope', '$http', function ($scope, $http) {

        $scope.init = function () {
            $http({
                method: 'GET',
                url: '/get-items',
                contentType: 'application/json',
            }).success(function (response) {

                for (let index = 0; index < response.length; index++) {
                    console.log(response[index]["item_name"]);
                    console.log(response[index]["item_brand"]);
                    console.log(response[index]["item_picture"]);
                    console.log(response[index]["item_description"]);
                    console.log(response[index]["item_quantity"]);

                    //Build the divs...
                }
                console.log('Success!!');
            }).error(function () {
                console.log('Error!!');
            });
        };
    }]);

The divs should be built inside the for loop and they must allow for onClick events. I have added it using static html and the events were triggered successfully but I want to replace the following html code with angularJS:

<div class="col-md-3 col-sm-6 hero-feature">
  <div class="thumbnail">
      <img src="https://dsw.scene7.com/is/image/DSWShoes/377442_007_ss_01?$pdp-image$" alt="">
      <div class="caption">
          <h3>2-Feature Label</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
          <p>
              <button name="pink_shoes" ng-controller="buyItemController" class="btn btn-primary"
                      ng-click="info.item_number = 'item_2'; buy()">Buy Now
              </button>
              <button ng-controller="shopController" class="btn btn-default" ng-click="confirm()">More info
              </button>
          </p>
      </div>
  </div>
</div>

For example: in "ng-click="info.item_number = 'item_2'; buy()" I want to replace 'item_2' with 'response[index]["item_name"]', the picture link with my json response etc.Can anyone please point me to the right direction ? I'm relatively new to angularJS.

I have managed to make it work partially in JavaScript but it looks really bad and it doesn't work. Please see below:

let itemsContainer = document.getElementById('items-container');
let ele = document.createElement('div');

itemsContainer.appendChild(ele);

    ele.innerHTML = "<div class=\"col-md-3 col-sm-6 hero-feature\">\n" +
        "<div class=\"thumbnail\">\n" +
        "<img src=\"https://dsw.scene7.com/is/image/DSWShoes/377442_007_ss_01?$pdp-image$\" alt=\"\">\n" +
        "<div class=\"caption\">\n" +
        "<h3>2-Feature Label</h3>\n" +
        "<p>response[index][\"item_description\"]</p>\n" +
        "<p>\n" +
        "<button name=\"response[index][\"item_brand\"]\" ng-controller=\"buyItemController\" class=\"btn btn-primary\"\n" +
        "        ng-click=\"info.item_number=\"response[index][\"item_name\"]\";buy()\">Buy Now\n" +
        "</button>\n" +
        "<button ng-controller=\"shopController\" class=\"btn btn-default\" ng-click=\"confirm()\">More info\n" +
        "</button>\n" +
        "</p>\n" +
        "</div>\n" +
        "</div>\n" +
        "</div>";

The `.success` method as been [removed from the AngularJS framework](https://stackoverflow.com/questions/35329384/why-are-angularjs-http-success-error-methods-deprecated-removed-from-v1-6/35331339#35331339). — georgeawg, Jun 27 '19 at 02:17

score 2 · Accepted Answer · answered Jun 27 '19 at 02:11

Based on your requirement you need to use the ng-repeat tag which will loop through your array of objects and display it in HTML, please check the below example and let me know if any queries.

var app = angular.module('myApp', []).controller('MainCtrl', function MainCtrl($scope) {
  $scope.records = [{
    "Name": "Alfreds Futterkiste",
    "Country": "Germany",
    image: "https://via.placeholder.com/150"
  }, {
    "Name": "Berglunds snabbköp",
    "Country": "Sweden",
    image: "https://via.placeholder.com/150"
  }, {
    "Name": "Centro comercial Moctezuma",
    "Country": "Mexico",
    image: "https://via.placeholder.com/150"
  }, {
    "Name": "Ernst Handel",
    "Country": "Austria",
    image: "https://via.placeholder.com/150"
  }];

  $scope.onClick = function(item) {
    console.log('from event', item);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MainCtrl">
  <ul>
    <li ng-repeat="record in records">
      {{record.Name}}<br>
      <buton ng-click="onClick(record)"><img ng-src="{{record.image}}" alt="asdf"></buton><br> {{record.Country}}
      <br>
      <hr>
    </li>
  </ul>
</div>

Good example. That was exactly what I was missing. I was trying to build the divs in the JS file while it had to be in the html file. — ASO, Jun 29 '19 at 14:35

Build div with valid ng-click action from JSON response

1 Answers1