Problem when traveling the json obtained with ajax

Question

Problem when traveling the json obtained with ajax

Navigation

#1 by (2 votes)

1

I have this code HTML to consume JSON by ajax , but it does not show me the data I want to bring.

Can you tell me what I'm doing wrong?

The url of JSON is this: link *

This is the script that this is using:

<div class="panel-heading">Programa</div>
<div class="panel-body" id="programas"></div>

<script type="text/javascript">
    $(function () 
    {
         $.ajax({
             url: 'http://www.mocky.io/v2/5a5502052d0000f43a5b1e60',
             type: 'GET',
             dataType: 'JSON',
             success: function (data) 
             {
                 var program = "<ul>";
                 for (var c = 0; c < data.length; c++) {
                     var infoprograma = "<li>" + "Programa: "+  data[c].programa[0].programa;
                     infoprograma += "Sinopsis: " + data[c].programa[0].sinopsis;
                     infoprograma += "Conductor: " + data[c].programa[0].conductor;
                     infoprograma += "Clasificacion: " + data[c].programa[0].clasificacion;
                     infoprograma += " <em>" + data[c].programa[0].tipoProgram + "</em> </li>";
                     program += infoprograma; 
                 }
                 program += "</ul>";
                 $("#programas").html(infoprograma);
             }
             })
    });
</script>

When I give Network > Preview it shows me the object I'm calling, but in the div it does not show me anything.

javascript jquery json ajax

asked by Mateo Diaz lopez 09.01.2018 в 19:17

source

1 answer

How can I add elements to a .XML document? How to capture the close event of a MessageBox

score 2 · Accepted Answer

The problem is that data is an object and you are trying to iterate through data.length . This property does not exist so it is equal to undefined . What you need to iterate is the programa property.

Solution:

The for should do about data.programa.length and access the program data using data.programa[c].*

Example:

success: function(data) {
  var program = "<ul>";
  for (var c = 0; c < data.programa.length; c++) {
    var infoprograma = "<li>" + "Programa: " + data.programa[c].programa;
    infoprograma += "Sinopsis: " + data.programa[c].sinopsis;
    infoprograma += "Conductor: " + data.programa[c].conductor;
    infoprograma += "Clasificacion: " + data.programa[c].clasificacion;
    infoprograma += " <em>" + data.programa[c].tipoProgram + "</em> </li>";
    program += infoprograma;
  }
  program += "</ul>";
  $("#programas").html(infoprograma);
}