asked on

How to define a list using AngularJS - Pass initialized list to my controller using AngularJS

I have a WebAPI that I am testing which uses intialized list and id as parms passed to to model.
It's works fine using postman but when I try to pass the list parm to the controller for a
request using html and angularjs it does not work. I get the following error?

Failed to load resource: the server responded with a status of 404 (Not Found)

<Error>
<Message>
No HTTP resource was found that matches the request URI 'http://homedev.kmhp.com/API/favorites/api/favorites/get_favorites/,RBUCK'.
</Message>
<MessageDetail>
No type was found that matches the controller named 'favorites'.

Preceding the comma before the parm RBUCK should be the initialized list for the angularjs call to the WebApi
How do I define the list in AngularJS?
I have included code snippets fro angularjs, html, WebApi (controller and model)

//Angularjs code

app.controller("handleFavoritesController", function ($scope, $http) {

    // Get Favorites
    $scope.get_favorites = function () {
       
        $scope.favInRequest = [];
         var data = {
            
            fav_uid: ""
            
            };
            fav_uid = document.getElementById('favuserid').value
            $http({
                method: "GET",
                url: "/API/favorites/api/favorites/get_favorites/" + $scope.favInRequest + "," + fav_uid + " "
            }).then(function (data, status, headers, config) {

                $scope.FavInRequest = response.data
                 
                alert("Get Success");
            }, function (data, status, headers, config) {
                console.log("error!")
                console.log(data);
            });
        };

Open in new window

//WebApi

//Controller

 [Route("api/handleFavorites/get_favorites/{favuserid}")]
        [HttpGet]
        public IHttpActionResult get_favorites(string favuserid)
        {

            try
            {

                List<handleFavorites> favInRequest = new List<handleFavorites>();
                var fav_Requests = new handleFavorites();
                fav_Requests.get_favorites(favInRequest, favuserid);

                return Ok(favInRequest);


            }
            catch (Exception ex)
            {
                return InternalServerError(ex);
            }
        }

Open in new window

//WebApi

//Model

public List<handleFavorites> get_favorites(List<handleFavorites> FavInRequest, string favuserid)
        {

            using (var con = favorites.Models.Database.GetConnection())
            {
                // Select Favorites
                using (SqlCommand command = new SqlCommand("get_favorites", con))
                {
                    command.CommandType = System.Data.CommandType.StoredProcedure;
                    command.Parameters.Add(new SqlParameter("@myuid", System.Data.SqlDbType.VarChar)).Value = favuserid;
                    // Get Favorites
                    con.Open();

                    using (SqlDataReader rdr = command.ExecuteReader())

                        if (rdr.HasRows)
                            while (rdr.Read())
                            {
                                handleFavorites favSet = new handleFavorites();
                                favSet.fav_id = Convert.ToInt32(rdr["fav_id"]);
                                favSet.fav_uid = rdr["fav_uid"].ToString();
                                favSet.fav_link = rdr["fav_link"].ToString();
                                favSet.fav_title = rdr["fav_title"].ToString();
                                favSet.fav_linktarget = rdr["fav_linktarget"].ToString();

                                FavInRequest.Add(favSet);


                            }
                    con.Close();

                    return FavInRequest;
                }

Open in new window

//Testing with presentation See first form input definition

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body ng-app="app" ng-controller="handleFavoritesController">
    
    <h1>Favorites Web API Testing</h1>
    <div id="divAngular">
        <div>
            <form>
                <div>
                    <input id="favuserid" type="text" placeholder="Enter Favorites ID" /><input id="GetFav" type="button" value="Get Favorites" ng-model="FavInRequest" ng-click="get_favorites()" />
                    {{FavInRequest}}
                    &nbsp;<input id="favdelete" type="text" placeholder="Enter Favorite to Delete" /><input id="Deletion" type="button" value="Delete Favorites" ng-model="fav_id" ng-click=" insight_delete_favorites()" />
                    {{fav_id}}
                    &nbsp;<input id="favall" type="text" placeholder="Enter All Favorite to Delete" /><input id="DeletionAll" type="button" value="Delete All Favorites" ng-model="fav_uid" ng-click="insight_deleteall_favorites()" /> 
                    {{fav_uid}}
                    <br />
                    <br />
                    &nbsp;<input id="favinsertUser" type="text" placeholder="Enter User ID" />&nbsp;<input id="favinsertLink" type="text" placeholder="Enter Link" />&nbsp;<input id="favinsertTitle" type="text" placeholder="Enter Title" />
                    <input id="favinsertion" type="button" value="Insert Favorite" ng-model="favoritesInsert" ng-click="insight_insert_favorites()" />
                    {{favoritesInsert}} 
                   
                </div>

            </form>
        </div>
    </div>

    <script src="http://home-dev.kmhp.com/global/js/AngularJS/angularjs.min.1.7.5.js"></script>
    <script src="http://home-dev.kmhp.com/global/js/AngularJS/favorites/app.js"></script>
    <script src="http://home-dev.kmhp.com/global/js/AngularJS/favorites/Controllers/handleFavoritesController.js"></script>
</body>
</html>

Open in new window

Julian Hansen

The error is pretty clear - you are using a URL that does not exist on the server.

Angular does not define the 404 - that is the server.

You need to correct your URL.

Let's start with what a correct (Working) URL should look like and then work that into your code.

Isaac Johnson

ASKER

The correctly defined url is referenced in the attached code snippet
In my opinion, the problem seems to be emulating the call that is used
in the c# controller which when referencing via postman only requires the
using id and the array is passed to the sql query. I don't understand
how to mimmick the call using my js controller which seems to require I
pass an empty list plus userid

$scope.get_favorites = function () {
       
         $scope.favInRequest = [];
        //function get_favorites($http, $scope) {
       //var favInRequest = [];
         var data = {
              
             favuserid: ""
            
            };
         favuserid = document.getElementById('favuserid').value
        
            $http({
                method: "GET",
                url: "/API/favorites/api/favorites/get_favorites/" + $scope.favInRequest + "," + favuserid + " "

Open in new window

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Isaac Johnson

ASKER

Yes. You were right again!

/API/favorites/api/favorites/insight_insert_favorites/

Should be:

/API/favorites/api/handleFavorites/get_favorites/ (handleFavorites/ is controller name)

It worked as the call used in my c# controller without the array described again and using the single id parm.

Appreciate your help again. I need to do more reading.

Thanks again
Isaac

Julian Hansen

You are welcome.