vijay vijay - 6 months ago 9
AngularJS Question

Data retrieved using angular js through webapi is not complete, only one column is retrieved

problem description



Hi everyone, i am having a problem of displaying the data from a database table through webapi using angularjs with stored procedures.
It only retrieves data from first column of the database table.
I tried everything upto my knowledge, if anyone have the answer, then please help me to solve the problem. I been struck at this for one week....
I shown all the details needed as below. If anyone needs anymore information, kindly do let me know...

studentPage.html



<!DOCTYPE html>
<html>
<head>
<script src="Scripts/jquery-1.10.2.js"></script>
<script src="Scripts/angular.js"></script>
<title></title>
<meta charset="utf-8" />
</head>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<table border="1">
<thead>
<tr>
<th>
Student Name
</th>
<th>
Student Age
</th>
<th>
Student Dob
</th>
<th>
Student Choice
</th>
</tr>
</thead>
<tbody >
<tr ng-repeat="stds in Students">
<td align="center" style="border: solid 1px #659EC7;
padding: 5px;table-layout:fixed;">
<span style="color:#9F000F">{{stds.name}}</span>
</td>

<td align="center" style="border: solid 1px #659EC7;
padding: 5px;table-layout:fixed;">
<span style="color:#9F000F">{{stds.age}}</span>
</td>

<td align="center" style="border: solid 1px #659EC7;
padding: 5px;table-layout:fixed;">
<span style="color:#9F000F">{{stds.dob}}</span>
</td>

<td align="center" style="border: solid 1px #659EC7;
padding: 5px;table-layout:fixed;">
<span style="color:#9F000F">{{stds.choice}}</span>
</td>
</tr>
</tbody>
</table>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope,$http) {
$http.get("http://localhost:54657/api/items").success(function (data) {
$scope.Students = data;
}
);
});
</script>

</body>
</html>


studController.cs



using studDetails1.Models;
using System;
using System.Collections;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;

namespace studDetails1.Controllers
{
public class studController : ApiController
{
studEntities studObjApi = new studEntities();
[HttpGet]
[Route("api/items/")]
public ICollection<Student> selectStudents()
{
ICollection <Student> returnItems = studObjApi.sp_CRUD(null, null, null, null, 5).ToList(); ---->Error shows on this line.
return returnItems;
}

}

}


database table at1's stored procedures



USE [angular1]
GO
/****** Object: StoredProcedure [dbo].[sp_CRUD] Script Date:
5/25/2016 12:57:06 AM ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
-- =============================================
-- Author: <Author,,Name>
-- Create date: <Create Date,,>
-- Description: <Description,,>
-- =============================================
ALTER PROCEDURE [dbo].[sp_CRUD]
-- Add the parameters for the stored procedure here
(
@name varchar(50) NULL,
@age varchar(50) NULL,
@dob varchar(50) NULL,
@choice varchar(50) NULL,
@operation int
)
As
Begin
IF(@operation=1)
BEGIN
IF NOT EXISTS (SELECT * FROM at1 WHERE name=@name)
BEGIN
insert into
at1(name,age,dob,choice)values(@name,@age,@dob,@choice)
Select 'Inserted' as results
END
ELSE
BEGIN
Select 'Exists' as results
END
END

ELSE IF(@operation=2)
BEGIN
IF EXISTS (SELECT * FROM at1 WHERE name=@name)
BEGIN
update at1 set name=@name,age=@age,dob=@dob,@choice=@choice
where name=@name
Select 'updated' as results
END
ELSE
BEGIN
Select 'Exists' as results
END
END

ELSE IF(@operation=3)
BEGIN
delete from at1 where name=@name
END

ELSE IF(@operation=4)
BEGIN
select [name],
[age],
[dob],
[choice]
from
at1
WHERE
name = @name
END

ELSE IF(@operation=5)
BEGIN
select name,
age,
dob,
choice
from
at1
END
End


Image of executing studentPage.html



enter image description here

As you can see in the above picture there are no data is displayed in the tables. But the data of the first column in the database table at1 is retrieved, but not displayed.
I checked it in the following way by giving the api name directly...

XML Image of executing studentPage.html



enter image description here

This is the details i gathered so far, so i need this very very importantly, help me to solve this, and advance thanks :)

Student.cs



namespace studDetails1
{
public class Student
{
public string name { get; set; }
public string age { get; set; }
public string dob { get; set; }
public string choice { get; set; }
}
}

Answer

Change:

   [HttpGet]
    [Route("api/items/")]
    public IList selectStudents()
    {            
        return studObjApi.sp_CRUD(null, null, null, null, 5).ToList();
    }

To

   [HttpGet]
    [Route("api/items/")]
    public ICollection<MyEntityName> selectStudents()
    {            
        /* forget all the stored procedure stuff for the moment */
        ICollection returnItems = new List<MyEntity>();
         MyEntityName e1 = new MyEntityName() { LastName = "Smith" };
         MyEntityName e2 = new MyEntityName() { LastName = "Jones" };
         MyEntityName e3 = new MyEntityName() { LastName = "Winkler" };
         returnItems.Add(e1);
         returnItems.Add(e2);
         returnItems.Add(e3);
         return returnItems;
    }

Now, you need to figure out what you MyEntityName is. What kind of object does your procedure create? then after that works:

 [HttpGet]
    [Route("api/items/")]
    public ICollection<MyEntityName> selectStudents()
    {            
        /* forget all the stored procedure stuff for the moment */
        ICollection<MyEntityName> returnItems = studObjApi.sp_CRUD(null, null, null, null, 5).ToList();
        return returnItems; /* code it like this so you can set a breakpiont here */
    }

I think you are missing the entire concept of create a DTO object ( a small class with simple properties..and return an ICollection of those.

Your MyObjectName might be:

public class Student
{
  public string LastName {get;set;}
  public string FirstName {get;set;}
}
Comments