problems to consume api with Jquery

Question

problems to consume api with Jquery

Navigation

#1 by (0 votes)
#2 by (0 votes)

1

I'm new to web programming. I'm going to the point. I have an api: link this is created in azure with asp.net which returns me a JSON or so I think and I try to consume it with this code.

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
    <ul></ul>

<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
     $(document).ready(function() { 
         $.ajax({
             type: "GET",
             url: "http://apielviracom20170717104733.azurewebsites.net/api/Menus",
             dataType: "json",
             success: function(data) {

                $("ul").children().remove();
                $(data).find("MenuCompleto").each( function() {
                    var info = '<li>Fecha: ' + $(this).find("FechaString").text() + '</li>';
                    $("ul").append(info);
                });
             } 
         });

     });

</script>
</body>
</html>

I do not understand why it does not work, Postman is perfect, I have read several post to consume the api and I think it is correct. any help I would appreciate it very much.

Thank you, best regards

jquery

asked by aratar79 17.07.2017 в 23:45

source

2 answers

Return Json of type "field_name": value with Java and Spring Dialog is repeated twice C # WPF

score 0 · Answer 1

You are not receiving a JSON if not an XML, now to read the xml information:

$(document).ready(function() {
  $.ajax({
    type: "GET",
    url: "https://apielviracom20170717104733.azurewebsites.net/api/Menus",
    dataType: "xml",
    success: function(data) {

      $("ul").children().remove();

      //leyendo la informacion del tag 
      let menu = data.getElementsByTagName("MenuCompleto")[0]
      //obteniendo la cantidad de elementos del padre
      let info = menu.children.length;
      //recorriendo los elementos para concatenarlos en la lista
      for (let i = 0; i < info; i++) {
        $('ul').append( menu.children[0].innerHTML )
      }


    }
  });

});

score 0 · Answer 2

@JuankGlezz I put the whole code as it has been:

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<ul></ul>

<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
     $(document).ready(function() {
        $.ajax({
            type: "GET",
            url: "https://apielviracom20170717104733.azurewebsites.net/api/Menus",
            dataType: "xml",
            success: function(data) {

            $("ul").children().remove();

            //leyendo la informacion del tag 
            let menu = data.getElementsByTagName("MenuCompleto");
            //obteniendo la cantidad de elementos del padre
            let info = menu[0].children.length;
            //recorriendo los elementos para concatenarlos en la lista
            for (let i = 0; i < info; i++) {
                $('ul').append( menu[0].children[0].innerHTML );
            }


            }
        });

        });
</script>
</body>
</html>

to see me apart from a semicolon I have not seen any error, and I have seen it by the [0] that you told me. I have been looking at documentation, but I do not get it, the concept has caught me the first time.