0

Tengo unas dudas y problemas.

Mi código es el siguiente.

en html

<div id="summary"></div>

en js

function callurl() {
  $.ajax({
    url: 'https://jsonplaceholder.typicode.com/posts',
    type: "GET",
    dataType: "json",
    success: function(msg) {
      JsonpCallback(msg);
    },
    error: function() {
      ErrorFunction();
    }
  });
}

function JsonpCallback(json) {
  for (var i = 0; i < json.length; i++) {
    $('#summary').append('<b>Post:</b> ' + json[i].id + '<br />');
    $('#summary').append('<b>Título:</b> ' + json[i].title + '<br />');
    $('#summary').append('<b>Descripción:</b> ' + json[i].body + '<br />');
    $('#summary').append('<hr />');
  }
}

callurl();

Necesito, la forma de crear una lista.

Ejemplo.

Post: 1

Título: sunt aut facere repellat provident occaecati excepturi optio reprehenderit

Boton Abrir contenido.

Al hacer click se abra el contenido de ese post.

Contenido: uia et suscipit suscipit recusandae consequuntur expedita et cum reprehenderit molestiae ut ut quas totam nostrum rerum est autem sunt rem eveniet architecto.

Quiero llegar a una pequeña app, donde se muestre un feed de post con el título y al darle click me abra el contenido de ese post.

1 respuesta 1

1

Se puede mejorar pero creo que te da una idea de cómo hacerlo utilizando solo JQuery y Ajax:

function callurl() {
  $.ajax({
    url: 'https://jsonplaceholder.typicode.com/posts',
    type: "GET",
    dataType: "json",
    success: function(msg) {
      JsonpCallback(msg);
    },
    error: function() {
      ErrorFunction();
    }
  });
}

function JsonpCallback(json) {
  for (var i = 0; i < json.length; i++) {
    $('#summary').append('<b>Post:</b> ' + json[i].id + '<br />');
    $('#summary').append('<b>Título:</b> ' + json[i].title + '<br />');
    $('#summary').append('<span id="description_' + i + '"><b>Descripción:</b> ' + json[i].body + '<br /></span>');
    $('#summary').append('<button id="_' + i + '">Mostrar</button>');
    $('#summary').append('<hr />');
    $('#description_' + i).hide();
    $('#_' + i).on('click', function(event) {
    	var id = event.currentTarget.id;
    	$('#description' + id).show()
    })
  }
}

callurl();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="summary"></div>

5
  • Muy bueno! Gracias @potray , solo una cosa, que pasa si quiero que todo se abra con un boton? :)
    – Juan David
    el 28 mar. 2017 a las 13:50
  • @JuanDavid Utilizando como referencia la solución que te he dado, tendrías que hacer que ese botón llame a una función que, en un bucle, vaya haciendo $('#description_' + i).show().
    – Potray
    el 28 mar. 2017 a las 13:53
  • una ayuda mas, si quiero agregar una variable en la llamada del ajax url:'jsonplaceholder.typicode.com/posts&$key&$otherkey', y añadir el valor de esa variable en var $key = sssss como puedo hacerlo?
    – Juan David
    el 28 mar. 2017 a las 14:04
  • @JuanDavid no tiene nada que ver con la pregunta original, pero lo que quieres hacer no es una simple concatenación de cadenas?
    – Potray
    el 28 mar. 2017 a las 14:07
  • @JuanDavid para hacer cosas más complejas te puedo recomendar que estudies librerías como Angular (angularjs.org) o React (facebook.github.io/react). el 28 mar. 2017 a las 14:33

Tu Respuesta

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

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