Consuming JSON ASMX Web Services with AngularJS

Question

I have a problem, I need to display the data of my database on a table, but I can not. I have a webservice that is displaying data from my database in Json, but when I try to display on a table with angular, it does not load.

enter image description here

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
    <link href="Content/bootstrap.css" rel="stylesheet" />
    <script src="Scripts/jquery-1.9.1.js"></script>
    <script src="Scripts/bootstrap.js"></script>
    <script src="Scripts/angular.js"></script>
    <script src="FrontEnd/BI/Graficos/Compras/Forms/Controllers/ralatorio-compras.js"></script>
</head>
<body>

    <div class="container" style="padding-top: 100px" ng-app="appCompras">
        <table class="table table-striped table-bordered">
            <thead class="table-head center-content">
                <tr>
                    <th>Cod. Compra</th>
                    <th>Cod. Produto</th>
                    <th>Nome</th>
                    <th>Quantidade</th>
                    <th>Data da Compra</th>
                </tr>
            </thead>
            <tr ng-repeat="compra in names">
                <td>{{compra.PkCompras}}</td>
                <td>{{compra.IdProduto}}</td>
                <td>{{compra.Nome}}</td>
                <td>{{compra.Quantidade}}</td>
                <td>{{compra.DataCompra}}</td>
            </tr>
        </table>
    </div>


    <script>
        var app = angular.module('appCompras', []);

        app.controller('comprasCtrl', function ($scope, $http) {

            var url = "WebService.asmx\ListarQuinzeCompras";

            $http.get(url).success(function (data) {
                var appJson = JSON.parse(data);

                $scope.names = JSON.parse(appJson);
            })

        });
    </script>

</body>
</html>

My WebService:

[WebMethod]
        [ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Json)]
        public void ListarQuinzeCompras()
        {
            var SQL = new LibOrgm.SQL();
            var cn = new ADODB.Connection();

            try
            {
                Context.Response.Clear();
                Context.Response.ContentType = "application/json";
                SQL.AbrirConexao(cn);

                var retorno = ComprasFO.ListarUltimasQuinzeCompras(cn);
                Context.Response.Write(SerializerFO.Serializador(retorno));
            }
            catch (Exception Ex)
            {
                Context.Response.Write(Ex);
            }
            finally
            {
                SQL.FecharConexao(cn);
            }
        }

My class to serialize

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.Serialization.Json;
using System.Text;
using System.Web;

namespace WebApplication1.CORE
{
    public class SerializerFO
    {
        public static object DeserializarObjetoJson(string Json, object Objeto)
        {

            try
            {

                MemoryStream Stream = new MemoryStream(Encoding.Unicode.GetBytes(Json));
                DataContractJsonSerializer Desserializador = new DataContractJsonSerializer(Objeto.GetType());

                Objeto = Desserializador.ReadObject(Stream);

            }
            catch
            {
                throw;
            }
            return Objeto;
        }


        public static string Serializador(object Objeto)
        {
            string Json;
            try
            {

                MemoryStream Stream = new MemoryStream();
                DataContractJsonSerializer Serializador = new DataContractJsonSerializer(Objeto.GetType());

                Serializador.WriteObject(Stream, Objeto);

                Stream.Position = 0;
                StreamReader Leitor = new StreamReader(Stream);

                Json = Leitor.ReadToEnd();

            }
            catch
            {
                throw;
            }

            return Json;
        }
    }
}

My class:

using ADODB;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using LibOrgm;

namespace WebApplication1.BI.Graficos.Compras
{
    public class ComprasDA
    {
        public static ComprasBO GetCompras(int PkCompras, Connection cn)
        {
            var Compra = new ComprasBO();
            var RsCompra = new ADODB.Recordset();
            try
            {
                RsCompra.Open(String.Format("select * from Compras where PkCompras = {0}", PkCompras), cn, CursorTypeEnum.adOpenStatic, LockTypeEnum.adLockReadOnly);
                if (!RsCompra.EOF )
                {
                    Compra.PkCompras = int.Parse(RsCompra.Fields["PkCompras"].Value.ToString());
                    Compra.IdProduto = int.Parse(RsCompra.Fields["IdProduto"].Value.ToString());
                    Compra.Nome = RsCompra.Fields["Nome"].Value.ToString();
                    Compra.Quantidade = int.Parse(RsCompra.Fields["Quantidade"].Value.ToString());
                    Compra.DataCompra = DateTime.Parse(RsCompra.Fields["DataCompra"].Value.ToString()); 
                }
            }
            catch (Exception)
            {
                throw;
            }

            return Compra;
        }


        public static ComprasBO[] ListUltimos15(Connection cn)
        {
            var RsCompras = new Recordset();
            try
            {
                RsCompras.Open("SELECT TOP 15 PkCompras FROM Compras ORDER BY PkCompras DESC", cn, CursorTypeEnum.adOpenStatic, LockTypeEnum.adLockReadOnly);
                if (!RsCompras.EOF)
                {
                    var ListaCompras = new ComprasBO[RsCompras.RecordCount];
                    for (int i = 0; i < RsCompras.RecordCount; i++)
                    {
                        ListaCompras[i] = GetCompras(int.Parse(RsCompras.Fields[0].Value.ToString()), cn);
                        RsCompras.MoveNext();
                    }
                    RsCompras.Close();
                    return ListaCompras;
                }

            }
            catch (Exception)
            {
                throw;
            }
            return new ComprasBO[0];
        }

    }
}

My Object

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using ADODB;
using LibOrgm;

namespace WebApplication1.BI.Graficos.Compras
{
    public class ComprasBO
    {
        public int PkCompras { get; set; }
        public int IdProduto { get; set; }
        public string Nome { get; set; }
        public int Quantidade { get; set; }
        public DateTime DataCompra { get; set; }
    }
}

Amir Shahinkar · Accepted Answer · 2016-04-01 21:02:21Z

1

You should remove JSON.parse and replace it with data as follows

        var url = "WebService.asmx\ListarQuinzeCompras";

        $http.get(url).success(function (data) {

            $scope.names = data;
        })

answered Apr 1, 2016 at 21:02

Amir Shahinkar

1452 silver badges7 bronze badges

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

Comments

Rohìt Jíndal · Accepted Answer · 2016-04-01 19:29:35Z

0

Your $scope.names is not binding in the HTML DOM.You have to define the controller ng-controller="comprasCtrl" in HTML DIV.

Code :

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="appCompras">
<head>
    <title></title>
    <link href="Content/bootstrap.css" rel="stylesheet" />
    <script src="Scripts/jquery-1.9.1.js"></script>
    <script src="Scripts/bootstrap.js"></script>
    <script src="Scripts/angular.js"></script>
    <script src="FrontEnd/BI/Graficos/Compras/Forms/Controllers/ralatorio-compras.js"></script>
</head>
<body>

    <div class="container" style="padding-top: 100px" ng-controller="comprasCtrl">
        <table class="table table-striped table-bordered">
            <thead class="table-head center-content">
                <tr>
                    <th>Cod. Compra</th>
                    <th>Cod. Produto</th>
                    <th>Nome</th>
                    <th>Quantidade</th>
                    <th>Data da Compra</th>
                </tr>
            </thead>
            <tr ng-repeat="compra in names">
                <td>{{compra.PkCompras}}</td>
                <td>{{compra.IdProduto}}</td>
                <td>{{compra.Nome}}</td>
                <td>{{compra.Quantidade}}</td>
                <td>{{compra.DataCompra}}</td>
            </tr>
        </table>
    </div>


    <script>
        var app = angular.module('appCompras', []);

        app.controller('comprasCtrl', function ($scope, $http) {

            var url = "WebService.asmx\ListarQuinzeCompras";

            $http.get(url).success(function (data) {
                var appJson = JSON.parse(data);

                $scope.names = JSON.parse(appJson);
            })

        });
    </script>

</body>
</html>

Try this it will work . Thanks

answered Apr 1, 2016 at 19:29

Rohìt Jíndal

27.4k16 gold badges80 silver badges133 bronze badges

11 Comments

Rohìt Jíndal Over a year ago

@IgorLessa, what error are you getting in console ?

Igor Lessa Over a year ago

angular.js:11630 GET localhost:58593/WebService.asmxListarQuinzeCompras 404 (Not Found)

Rohìt Jíndal Over a year ago

Simple !!..URL defined by you to call service is not available WebService.asmx\ListarQuinzeCompras..please check

Igor Lessa Over a year ago

It is already so, you see: var url = "WebService.asmx\ListarQuinzeCompras";

Rohìt Jíndal Over a year ago

URL is not correct localhost:58593/WebService.asmxListarQuinzeCompras it is giving you 404 error.

|

Collectives™ on Stack Overflow

Consuming JSON ASMX Web Services with AngularJS

2 Answers 2

Comments

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related