AngularJS forEach not working on $http response

Question

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

Maybe unrelated, but you have a typo dispaly = false;

Frank Modica
– Frank Modica

2017-09-14 08:57:47 +00:00
Commented Sep 14, 2017 at 8:57 — Frank Modica
– Frank Modica, Commented Sep 14, 2017 at 8:57
m not getting values and key from response

ASM
– ASM

2017-09-14 09:03:23 +00:00
Commented Sep 14, 2017 at 9:03 — ASM
– ASM, Commented Sep 14, 2017 at 9:03
Any feedback ASM?

lin
– lin

2017-11-08 23:02:22 +00:00
Commented Nov 8, 2017 at 23:02 — lin
– lin, Commented Nov 8, 2017 at 23:02

Fabien Dezautez · Accepted Answer · 2017-09-14 09:11:06Z

1

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 !

answered Sep 14, 2017 at 9:11

Fabien Dezautez

12910 bronze badges

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

2 Comments

ASM Over a year ago

getting response.data as undefined.

Fabien Dezautez Over a year ago

So your configuration for http request is bad.... I supposed that your api doesn't end with "/url/" .... If the url does not exist, response will never be defined. More of that, mode: 'cors' doesnt exist as a parameter of $http method... If you have the possibility, make sure that your api is called by adding a log into your web server method. If it is not reached, you have to check your configuration here : docs.angularjs.org/api/ng/service/$http

lin · Accepted Answer · 2017-09-14 10:13:41Z

0

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

edited Sep 14, 2017 at 10:13

answered Sep 14, 2017 at 9:02

lin

18.5k4 gold badges66 silver badges88 bronze badges

12 Comments

ASM Over a year ago

$scope.display; getting overwrite

lin Over a year ago

@ASM Sorry, I do not understand you. Please explain your problem.

ASM Over a year ago

I am not getting correct value. i am getting object in value insteat i want single value from object response

TheChetan Over a year ago

@ASM use the chrome/firefox dev tools and see your object, see if you're getting the data from the request

lin Over a year ago

@ASM I added a full working example in my codes. Please check the demo plnkr and compare it with your solution.

|

Collectives™ on Stack Overflow

AngularJS forEach not working on $http response

JS

HTML

2 Answers 2

2 Comments

View

AngularJS application

12 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

JS

HTML

2 Answers 2

2 Comments

View

AngularJS application

12 Comments

Your Answer

Sign up or log in

Post as a guest

Related