Retrieve and display data using ASP.Net Web API in AngularJS

srivatchu
 
on Mar 31, 2020 07:28 AM
1557 Views

hi,

I am new to angularjs. Trying to invoke a webapi to angularjs app. I could not retrieve the message into my angular application. Please take a look into my code and let me know where i am going wrong. P.S - My api and angular are separetely hosted.

/// <reference path="angular.min.js" />
var myapp = angular.module("MyMod", [])

myapp.controller("Myctrl", function ($scope, $http) {
    $http.get('https://localhost:44323/api/EmployeeInformation/Get').
    then(function (response) {
        $scope.greeting = response.data;
    });
});

 

<!DOCTYPE html>
<html ng-app="MyMod">
<head>
    <meta charset="utf-8" />
    <title>Hello AngularJS</title>
    <script src="Scripts/angular.js"></script>
    <script src="Scripts/InvokeAPI.js"></script>
</head>
<body>
    <div ng-controller="Myctrl" ng-repeat="m in greeting">
        <!--<p>The ID is {{greeting.id}}</p>-->
        <p>The content is {{greeting.string}}</p>
    </div>
</body>
</html>

 

Web api controller
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Net.Http;
using System.Web.Http;
using System.Web.Http.Cors;

namespace webApiDemo.Controllers
{
    [EnableCors(origins: "*", headers: "*", methods: "*")]

    public class EmployeeInformationController : ApiController
    {        
        [System.Web.Http.Route("api/EmployeeInformation/Get")]
        [System.Web.Http.HttpGet]
        
        public string Get()
        { 
            string content = "Hello World";
            return content;
        }
    }
}

 

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Mar 31, 2020 08:20 AM
on May 03, 2020 09:32 AM

Hi srivatchu,

Your Web API method returning string value and you are trying to loop through the data using ng-repeat directive which is not possible.

If you want loop and write data then you need to return List or Array from Web API method and display using ng-repeat directive.

If you are returning string message then display the string message without using ng-repeat directive.

Check the below example.

Namespaces

using System.Web.Http;

API Controller 

public class EmployeeInformationController : ApiController
{
    [Route("api/EmployeeInformation/Get")]
    [HttpGet]
    public string Get()
    {
        string content = "Hello World";
        return content;
    }

    [Route("api/EmployeeInformation/GetArray")]
    [HttpGet]
    public string[] GetArray()
    {
        string content = "Hello World,Welcome";
        return content.Split(',');
    }
}

HTML

<!DOCTYPE html>

<html ng-app="MyApp">
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', [])
        app.controller('MyController', function ($scope, $http) {
            $http.get('https://localhost:44323/api/EmployeeInformation/Get')
                .then(function (response) {
                    $scope.greeting = response.data;
                });
            $http.get('https://localhost:44323/api/EmployeeInformation/GetArray')
               .then(function (response) {
                   $scope.greetingArray = response.data;
               });
        });
    </script>
</head>
<body>
    <div ng-controller="MyController">
        <p>The content is {{greeting}}</p><hr />
        <p ng-repeat="m in greetingArray">The content is {{m}}</p>
    </div>
</body>
</html>

Screenshot