4

a todos, Gracias por ver mi pregunta, espero puedan ayudarme. es lo siguiente..

Tengo el siguiente codigo.

en html

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

En Js tengo

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

function JsonpCallback(json) {
    document.getElementById('summary').innerHTML = json.title;
}
callurl();

Necesito estructurar el json, de la siguiente forma en el html.

introducir la descripción de la imagen aquí

Con id en cada variable. un ejemplo seria

<h4>Post ID:<span id="postid"></span></h4>
<h1>Titulo:<span id="titulo"></span></h1>
<h5>Contenido: <span id="contenido"></span></h5>

Alguien puede ayudarme.

Tengo algunas pruebas en https://jsfiddle.net/kw8ztdw6/4/


ACTUALIZACION Gracias a @jorius

Hice la actualizacion perfectamente en https://jsfiddle.net/kw8ztdw6/12/

Ahora lo que me pregunto, como puedo que

si tengo json de la siguiente forma..

{
   "orders":[
      {
         "id":12535,
         "order_number":12535,
         "created_at":"2017-03-26T18:10:00Z",
         "updated_at":"2017-03-27T07:25:49Z",
         "completed_at":"2017-03-27T07:25:49Z",
         "status":"processing",
         "currency":"BHD",
         "total":"30.00",
         "subtotal":"30.00",
         "total_line_items_quantity":1,
         "total_tax":"0.00",
         "total_shipping":"0.00",
         "cart_tax":"0.00",
         "shipping_tax":"0.00",
         "total_discount":"0.00",
         "shipping_methods":"",
         "payment_details":{
            "method_id":"credimax",
            "method_title":"Visa \/ Master Card",
            "paid":true
         }
      },      
      {
         "id":33333,
         "order_number":33333,
         "created_at":"2017-03-26T18:10:00Z",
         "updated_at":"2017-03-27T07:25:49Z",
         "completed_at":"2017-03-27T07:25:49Z",
         "status":"processing",
         "currency":"BHD",
         "total":"10.00",
         "subtotal":"10.00",
         "total_line_items_quantity":1,
         "total_tax":"0.00",
         "total_shipping":"0.00",
         "cart_tax":"0.00",
         "shipping_tax":"0.00",
         "total_discount":"0.00",
         "shipping_methods":"",
         "payment_details":{
            "method_id":"credimax",
            "method_title":"Visa \/ Master Card",
            "paid":true
         }
      },
   ]
}

como puedo, mostrar

<h5>Order numero: <span id="order_number"></span></h5>
<h5>Fecha: <span id="created_at"></span></h5>

de todos...

1
  • Puedes usar Handlebarsjs handlebarsjs.com para pitar el json como tu quieres, es muy fácil implementarlo. Commented el 27 mar. 2017 a las 16:33

2 respuestas 2

4

Lo que sucede es que el json que recibes es un arreglo, por lo tanto debes recorrerlo con un ciclo, además, como veo que estás usando jquery puedes hacer uso de los selectores y métodos de este para hacer más simple tu código, con append agregamos la información a tu div

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();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="summary"></div>

Respecto a la actualización de tu pregunta, sería básicamente lo mismo, solo que accederías a un nivel más dentro del objeto, es decir:

var OrdersObject = {
  "orders": [{
      "id": 12535,
      "order_number": 12535,
      "created_at": "2017-03-26T18:10:00Z",
      "updated_at": "2017-03-27T07:25:49Z",
      "completed_at": "2017-03-27T07:25:49Z",
      "status": "processing",
      "currency": "BHD",
      "total": "30.00",
      "subtotal": "30.00",
      "total_line_items_quantity": 1,
      "total_tax": "0.00",
      "total_shipping": "0.00",
      "cart_tax": "0.00",
      "shipping_tax": "0.00",
      "total_discount": "0.00",
      "shipping_methods": "",
      "payment_details": {
        "method_id": "credimax",
        "method_title": "Visa \/ Master Card",
        "paid": true
      }
    },
    {
      "id": 33333,
      "order_number": 33333,
      "created_at": "2017-03-26T18:10:00Z",
      "updated_at": "2017-03-27T07:25:49Z",
      "completed_at": "2017-03-27T07:25:49Z",
      "status": "processing",
      "currency": "BHD",
      "total": "10.00",
      "subtotal": "10.00",
      "total_line_items_quantity": 1,
      "total_tax": "0.00",
      "total_shipping": "0.00",
      "cart_tax": "0.00",
      "shipping_tax": "0.00",
      "total_discount": "0.00",
      "shipping_methods": "",
      "payment_details": {
        "method_id": "credimax",
        "method_title": "Visa \/ Master Card",
        "paid": true
      }
    }
  ]
};

for (var i = 0; i < OrdersObject.orders.length; i++) {
  $('#summary').append('<b>Número de orden: </b>' + OrdersObject.orders[i].order_number + '<br />');
  $('#summary').append('<b>Fecha: </b>' +
    OrdersObject.orders[i].created_at);
  $('#summary').append('<hr />');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="summary"></div>

6
  • 1
    Jorius, un código mas elegante que el mío +1 Commented el 27 mar. 2017 a las 16:44
  • @jorius Buen Codigo! mil gracias, actualice mi pregunta, me puedes ayudar?
    – Juan David
    Commented el 27 mar. 2017 a las 16:49
  • @mauricio-arias-olave Tu codigo tambien es bueno! mil gracias por aportar! amigo, ya entiendo varias cosas, de las dos forma
    – Juan David
    Commented el 27 mar. 2017 a las 16:49
  • 1
    @JuanDavid He actualizado mi respuesta respecto a lo último que pusiste en tu pregunta
    – Jorius
    Commented el 27 mar. 2017 a las 16:56
  • @JuanDavid, puedes guiarte con las respuestas que la comunidad te ha dado. Yo te recomendaría crear una nueva pregunta, pero primero, prueba con los conocimientos que has adquirido con estas respuestas. Saludos. Commented el 27 mar. 2017 a las 16:57
2

Vas bien. Lo que te falta es obtener los valores de los atributos del objeto.

(Además de que cada elemento debe tener un ID único) he modificado tu código para generar los resultados así:

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

function JsonpCallback(json) {

  // Variables internas.
  var postId = 0;
  var title = "";
  var body = "";
  var HTML_FINAL = "";

  // Aquí se recorre el objeto JSON devuelto por la llamada.
  for (var i = 0; i < json.length; i++) {

    // Asigno los valores a las variables locales.
    postId = json[i].id;
    title = json[i].title;
    body = json[i].body;

    // Armo el HTML que se colocará en el div "summary":
    HTML_FINAL += '<h4>Post ID:<span id="postid_' + postId + '">' + postId + '</span></h4>' +
      '<h1>Titulo:<span id="titulo_' + i + '">' + title + '</span></h1>' +
      '<h5>Contenido: <span id="contenido' + i + '">' + body + '</span></h5>';
  }

  // Después de salir del ciclo, la variable "HTML_FINAL" tendrá
  // toda la información obtenida. En este paso, se asigna
  // los resultados.
  document.getElementById('summary').innerHTML = HTML_FINAL;
}
callurl();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<div id="summary"></div>

Puedes acceder a tu jsfiddle modificado aquí.

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.