CODEWITHSUNDEEP
javascriptangularjs
Berkin
Berkin

Reputation: 1664

Get An Object From NodeJS to AngularJS

I have an object in backend side. This is how i send these objects to html

res.render('product', {title:title, allCategories : allCategories, product : product[0]})

I need to send product object to angularJs so i can make some operations with it. Product has multiple colors in it. I need to list them in dropdown menu with using angularjs.

    <div id='image' ng-controller="productColor">
      <select>             
          <option value="color" ng-repeat="color in colors">{{color}}</option>
      </select>     
    </div>

This is my angularjs 

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

app.controller('productColor',['$scope', '$http', function($scope,$http) {
    var url = 'http://localhost:3000/mens/mens-clothing/mens-clothing-suits/25604524'
    $http.get(url).then(function(response) {  

        $scope.colors = response.product
        console.log(response.product)
    });

}]);

I made up that url. But when i go to that url, first part starts.

Thanks

-Edit : response.product returns undefined

Upvotes: 0

Views: 150

Answers (1)

Luca Kiebel
Luca Kiebel

Reputation: 10096

In your angular code, you are creating an Array that has an Array at it's first index:

$scope.colors = [
    response.product.colors
]

Change that bit to 

$scope.colors =  response.product.colors;

and it should work for you:

app.controller('productColor',['$scope', '$http', function($scope,$http) {
    var url = 'http://localhost:3000/mens/mens-clothing/mens-clothing-suits/25604524'
    $http.get(url).then(function(response) {  
        console.log(response.data)
        console.log(response.product)

        $scope.colors = response.product.colors;
    });

}]);
<div id='image' ng-controller="productColor">
      <select>             
           <option value="color" ng-repeat="color in colors">{{color}}</option>
      </select>     
</div>

You are currently trying to use this code to send data as JSON to your angular script:

res.render('product', {title:title, allCategories : allCategories, product : product[0]})

But this does not create a JSON formatted response. As the Express Documentation says:

Renders a view and sends the rendered HTML string to the client.

What you want to use is the json() method of the res object

Sends a JSON response. This method sends a response (with the correct content-type) that is the parameter converted to a JSON string using JSON.stringify().

The code would look like this: 

res.json({title:title, allCategories:allCategories, product:product[0]});

Upvotes: 1

Related Questions