How to dynamically display ALL data from AJAX call using AngularJS?

Question

I am trying to search thru my web API by restaurant name and then display all the results that match that name.

I have to use AngularJS. I can get it to display manually but how do i get it to display dynamically for all the data and not just one?

I know I have to use $.each() to get each of the data results but it just isn't working.

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

function RestaurantsController($scope, $http) {

    // Create a function assigned to btnSearch's click event (ng-click).
    $scope.search = function (searchName) {

        var rName = $scope.searchName;
        var restName = $("#txtRestaurant").val();
        var restaurant = new Object();

        var strURL = "http://localhost:56475/api/Restaurants/GetByName/" + restName;

        //scope this
        var valid = true;
        var field = $scope.searchName;
        if (field == undefined) {
            alert("Please enter a valid name.");
            valid = false;
        } else {

            //.restaurantName has to match the parameter in my web service method
            restaurant.name = rName;
            restaurant = JSON.stringify(restaurant);

            // Configure the request by creating a JavaScript object with the necessary properties
            // and values for the request.
            var request = {
                method: "Get",
                url: strURL,
                headers: {  // object containing header type as properties.
                    'Content-Type': "application/json; charset=utf-8",
                },
                data: restaurant // input parameter sent as JSON object.
            };

            // Setup and send an AJAX request that sends a search term 
            // used by the Web API to find a team.
            $http(request).
                then(function (response) {  // success callback function
                    console.log(response);
                    $scope.restaurants = response.data;

                    var restaurants = response.data;

                    $.each(restaurants, function (index, restaurants) {
                        $("searchResults").append("<p>".concat("Restaurant ID: ", restaRestaurantID,
                            "<br>Restaurant Name: ", restaurants.RestName, "<br>Location: ", restaurants.RestAddr,
                            "<br>Star Rating: ", restaurants.StarRating, "<br>Price Rating: ", restaurants.PriceRating,
                            "<br>Restaurant : <br> <img src=", restaurants.ImageURL, " /><br>Cuisine: ", restaurants.Cuisine,
                            "<br>Average Rating: ", restaurants.AvgRating, "</p>"));
                    });
                },
                    function (response) {   // error callback function
                        alert("ERROR: " + response.data);
                    });
        }
    };
}

app.controller('RestaurantsController', RestaurantsController);

Try using angular.forEach(restaurants, function(restaurant, index){ }); to do the loop. — Immanuel Kirubaharan
– Immanuel Kirubaharan, Commented Dec 10, 2018 at 8:05
Why $("searchResults").append AND $.each if you are using angular. See the ng-repeat docs.angularjs.org/api/ng/directive/ngRepeat — Sachink
– Sachink, Commented Dec 10, 2018 at 8:12

ArunJaganathan · Accepted Answer · 2018-12-12 04:42:00Z

1

So you want to loop all the data from js file and want to append the data.

   var restaurants = response.data;
       $.each(restaurants, function (index, restaurants) {
          $("#searchResults").append("<p>".concat("Restaurant ID: ", 
           restaRestaurantID,"<br>Restaurant Name: ", restaurants.RestName, " 
             <br>Location: ", restaurants.RestAddr,"<br>Star Rating: ", 
             restaurants.StarRating, "<br>Price Rating: ", restaurants.PriceRating," 
             <br>Restaurant : <br> <img src=", restaurants.ImageURL, " /><br>Cuisine: 
             ", restaurants.Cuisine,"<br>Average Rating: ", restaurants.AvgRating, " 
           </p>"));
   });

Add confirm that your html file has a tag with "searchResults" as ID. Hope this will fix your issue.

answered Dec 12, 2018 at 4:42

ArunJaganathan

7032 gold badges7 silver badges20 bronze badges

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

Comments

ArunJaganathan · Accepted Answer · 2018-12-10 08:29:02Z

0

Define a scope variable for the response and then add ng-repeat in html.

   Eg: ` var request = {
            method: "Get",
            url: strURL,
            headers: {  // object containing header type as properties.
                'Content-Type': "application/json; charset=utf-8",
            },
            data: restaurant // input parameter sent as JSON object.
        };

        // Setup and send an AJAX request that sends a search term 
        // used by the Web API to find a team.
        $http(request).
            then(function (response) {  // success callback function
                console.log(response);
                $scope.restaurants = response.data;

                //var restaurants = response.data;
                $scope.searchResult = response.data;

            },
                function (response) {   // error callback function
                    alert("ERROR: " + response.data);
                });`

And in your HTML PAGE add "ng-repeat" for looping the results.Then there you will get all the results based on the search keyword.

answered Dec 10, 2018 at 8:29

ArunJaganathan

7032 gold badges7 silver badges20 bronze badges

1 Comment

pyuntae Over a year ago

i don't want to use ng-repeat. I want to dynamically populate the data in the ajax callback function.

Collectives™ on Stack Overflow

How to dynamically display ALL data from AJAX call using AngularJS?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related