CODEWITHSUNDEEP
javascripthtmlangularjs
ASM
ASM

Reputation: 27

AngularJS forEach not working on $http response

Getting the values in response as:

[{
  "Pf": "something1",
  "label": ""
}, {
  "Pf": "something1",
  "label": ""
}]

JS

$scope.display = false;

$scope.getPanel = $http({
  mode: 'cors',
  method: 'GET',
  url: '/url/',
  headers: {
    'Content-Type': 'application/json'
  }
}).success(function(response) {

  $scope.original = function() {

    angular.forEach(response, function(value, key) {
      if (value == "something1") {
        dispaly = false;
      } else if (value == "something2") {
        display = false;
      } else {
        display = true;
      }
    });
    return display;
  };
});

HTML

<td>
    <img src="image.png" uib-tooltip="{{status}}" ng-show="original()"/>
</td>

not getting key and value from response

Upvotes: 1

Views: 1189

Answers (2)

lin
lin

Reputation: 18392

Note that display get overwritten on each loop. Ensure your logic is correct. While display is an $scope variable you need to access this param by using $scope.display instead of display. Your codes should look like this:

View

<div class="container" ng-controller="ApplicationController">
   <h1>Output: {{ display }}</h1>
   <div ng-show="display">
     Now I'm here
   </div>
</div>

AngularJS application

var app = angular.module('plunker', []);

app.controller('ApplicationController', function($scope, $http) {

  $scope.display = false;

  $scope.getPanel = $http({
    mode: 'cors',
    method: 'GET',
    url: './data.json',
    headers: {
      'Content-Type': 'application/json'
    }
  }).success(function(response) {
    original(response);
  });


  function original (response) {
    angular.forEach(response, function(value, key) {
      if (value.Pf == "something1") {
        $scope.display = false;
      } else if (value.Pf == "something2") {
        $scope.display = false;
      } else {
        $scope.display = true;
      }
    });

    console.log($scope.display);
  };
});

--> Demo plnkr

Upvotes: 0

Fabien Dezautez
Fabien Dezautez

Reputation: 129

First of all, you do have an error in if display writing dispaly instead display.

Secondly, the angular foreach second argument is a function taking as first argument the iterator on your collection. Here, your collection is composed of two object, so on each iteration, value will be an object , for example : 

{
  "Pf": "something1",
  "label": ""
}

So, if you want to test if it is equal to "something1", you have to compare it with value.pf and not value.

You also need to call response.data because response is a structure that stores different informations about your request answer.

To finish, i advice you to store the value display in your scope and bind it on ng-show directive like this :

JS 

$scope.display = false;

$http({
  mode: 'cors',
  method: 'GET',
  url: '/url/',
  headers: {
    'Content-Type': 'application/json'
  }
}).success(function(response) {

    angular.forEach(response.data, function(value, key) {
      if (value.pf == "something1") {
        $scope.display= false;
      } else if (value.pf == "something2") {
        display = false;
      } else {
        display = true;
      }
    });
});

HTML

<td>
    <img src="image.png" uib-tooltip="{{status}}" ng-show="display"/>
</td>

Hope it helps !

Upvotes: 1

Related Questions