1

Para ahora para obtener la información, debo hacer un llamado AJAX, por ejemplo a la siguiente URL: https://s3.amazonaws.com/countries/countries.json.

Y debo pasare esos datos a un array al cual le voy hacer un proceso para desplegarlos en una página HTML.

Este es mi código ya con las modificaciones que me indicaron, pero al parecer no reconoce el $.getJSON:

El error que genera es: ReferenceError: Can't find variable: $

Esta es la estructura del JSON:

0
code "CO" name "Colombia" flag_url "https://s3.amazonaws.com/makeitreal/co.gif"

// escribe tu código acá $(document).ready(function(){ var countries = $.getJSON("https://s3.amazonaws.com/makeitreal/countries.json"); $('button').click(function(){ cargarTabla(); $('button').hide(); });

function cargarTabla(){
    var tabla = "";
    tabla+= "<table>";
    tabla+= "<tr>" 
    tabla+= "<th>Flag</th>"
    tabla+= "<th>Code</th>"
    tabla+= "<th>Name</th>"
    tabla+="</tr>";
  for (var i = 0; i < countries.responseJSON.length; i++) {
        tabla+="<tr>";
        tabla+="<td>" + "<img src=" + countries[i].flag_url + ">" + "</td>";
        tabla+="<td>" + countries[i].code + "</td>";
        tabla+="<td>" + countries[i].name + "</td>";
        tabla+="</tr>";
    }   
    tabla+= "</table>";
    $('.wrapper').append(tabla);
}

});

6
  • Antes los leía desde JSON que pasaba a un array: el 27 oct. 2017 a las 4:35
  • ¿En qué lenguaje? Deberías etiquetar la pregunta con el lenguaje... Y ¿Qué intentaste?
    – Mariano
    el 27 oct. 2017 a las 4:43
  • @Mariano, no estoy trabajando con ningún lenguaje, solo necesito leer el JSON y mostrarlo en una página HTML. el 27 oct. 2017 a las 5:49
  • @Mariano, puedo hacer esto? var countries = $.getJSON("s3.amazonaws.com/makeitreal/countries.json"); el 27 oct. 2017 a las 5:50
  • Ese lenguaje se llama JavaScript
    – Mariano
    el 27 oct. 2017 a las 6:03

3 respuestas 3

2

Tal como lo veo tienes 2 opciones

Llena countries con el json que devuelve la consulta

var countries;
$.getJSON("https://s3.amazonaws.com/makeitreal/countries.json", function (data){
     countries = data;//data devuelve el objeto json
});

Como lo tienes hecho pero recorrer countries.responseJSON

var countries = $.getJSON("https://s3.amazonaws.com/makeitreal/countries.json");
for (var i = 0; i < countries.responseJSON.length; i++) {
}

EDITO:

Para el error

Can't find variable: $

Tienes agregado Jquery en tu página? Si no es así, agrega el siguiente script.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

PD:Deberías contemplar el cambiar la formulación de la pregunta ya que el problema real no tiene mucho que ver con la pregunta actual

0

Totalmente de acuerdo con el compañero anterior, ademas tu código falla por que la variable countries que declaras, dentro de la función cargar tabla no existe por que es local al ready, además en el bucle de la función cargarTabla no estás extrayendo correctamente los valores de cada item, teniendo en cuenta que hayas incluido jquery y demás, este es tu código con un par de cambios y a mi me funciona.

    function cargarTabla(countries){
        var tabla = "";
        tabla+= "<table>";
        tabla+= "<tr>" 
        tabla+= "<th>Flag</th>"
        tabla+= "<th>Code</th>"
        tabla+= "<th>Name</th>"
        tabla+="</tr>";

        for (var i = 0; i < countries.responseJSON.length; i++) {
            tabla+="<tr>";
            tabla+="<td>" + "<img src=" + countries.responseJSON[i].flag_url + ">" + "</td>";
            tabla+="<td>" + countries.responseJSON[i].code + "</td>";
            tabla+="<td>" + countries.responseJSON[i].name + "</td>";
            tabla+="</tr>";
         }   
        tabla+= "</table>";
        $('.wrapper').append(tabla);
   }

  $(document).ready(function(){ 
      var countries = $.getJSON("https://s3.amazonaws.com/makeitreal/countries.json"); 
      $('button').on("click",function(e){
            cargarTabla(countries); 
            $('button').hide(); 
      });
  });

Espero que te sirva, un saludo

1
  • funcionó correctamente sus indicaciones, excelente aporte, debido a que la plataforma que evalúa la respuesta no la reconocía como válida debí hacer las correcciones que aparecen en mi respuesta. el 27 oct. 2017 a las 18:33
0

Aunque la respuesta de @Jaimito Pago y @elfinti funcionarion; como es una plataforma la que evalúa la solución, genereba un error, debí manejar mediante un callback la carga de los datos y no llevarlos a una variable, quedando de esta manera:

function cargarTabla(countries){
   var tabla = "";
   tabla+= "<table>";
   tabla+= "<tr>" 
   tabla+= "<th>Flag</th>"
   tabla+= "<th>Code</th>"
   tabla+= "<th>Name</th>"
   tabla+="</tr>";

  for (var i = 0; i < countries.length; i++) {
    tabla+="<tr>";
    tabla+="<td>" + "<img src=" + countries[i].flag_url + ">" + "</td>";
    tabla+="<td>" + countries[i].code + "</td>";
    tabla+="<td>" + countries[i].name + "</td>";
    tabla+="</tr>";
    }   
    tabla+= "</table>";
    $('.wrapper').append(tabla);
}

$(document).ready(function(){
     $('button').on("click",function(e){
         $.getJSON("https://s3.amazonaws.com/makeitreal/countries.json",          function(data) {
          cargarTabla(data);
          $('button').hide();
         });
     });
 });

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.