1

Intento realizar un plugin que cargue un JSON desde google book. En principio es muy simple y utilizo un solo archivo.

La función jquery recibe el JSON y con

console.log(data)

Lo muestra correctamente. El problema viene cuando trato de imprimir datos parciales del tipo

data.items[0].volumeInfo.title

Pues los cataloga de undefined.

El código que utilizo es:

<?php
/*
 * The JavaScript for our AJAX call
 */
function rellenar_datos_con_json() {
  ?>
  <script type="text/javascript" >
  jQuery(document).ready(function($) {
    $( '#buscarlibro' ).click( function() {
      var id = $( '#valor' ).val();
      $.ajax({
        method: "POST",
        url: ajaxurl,
        data: { 'action': 'cargar_json_action', 'id': id }
      })
      .done(function( data ) {
        console.log(data);
        $( '#librotable' ).append('<tr><td>' + data.items[0].volumeInfo.title + </td><td> + data.items[0].volumeInfo.authors + '</td><td>' + data.items[0].volumeInfo.publishedDate + '</td><td>' + data.items[0].selfLink + '</td></tr>');
      })
      .fail(function( data ) {
        console.log('Failed AJAX Call :( /// Return Data: ' + data);
      });
    });
  });
  </script>
  <?php
}
add_action( 'admin_footer', 'rellenar_datos_con_json' );
/*
 * The AJAX handler function
 */
function cargar_libros() {
  $data = file_get_contents('https://www.googleapis.com/books/v1/volumes?q=' . $id);
  echo $data;
  wp_die(); // just to be safe
}
add_action( 'wp_ajax_cargar_json_action', 'cargar_libros' );
?>

El JSON que recibo en la consola es:

{
 "kind": "books#volumes",
 "totalItems": 8,
 "items": [
  {
   "kind": "books#volume",
   "id": "iFxlngEACAAJ",
   "etag": "US1yzgaTJ/k",
   "selfLink": "",
   "volumeInfo": {
    "title": "Enciclopedia de Microsoft Visual C#",
    "authors": [
     "Francisco Javier Ceballos Sierra"
    ],
    "publishedDate": "2013",
    "industryIdentifiers": [
     {
      "type": "ISBN_10",
      "identifier": "8499642640"
     },
     {
      "type": "ISBN_13",
      "identifier": "9788499642642"
     }
    ],
    "readingModes": {
     "text": false,
     "image": false
    },
    "pageCount": 1118,
    "printType": "BOOK",
    "categories": [
     "Computers"
    ],
    "maturityRating": "NOT_MATURE",
    "allowAnonLogging": false,
    "contentVersion": "preview-1.0.0",
    "imageLinks": {
     "smallThumbnail": "",
     "thumbnail": ""
    },
    "language": "en",
    "previewLink": "",
    "infoLink": "",
    "": "."
   },
   "saleInfo": {
    "country": "ES",
    "saleability": "NOT_FOR_SALE",
    "isEbook": false
   },
   "accessInfo": {
    "country": "ES",
    "viewability": "NO_PAGES",
    "embeddable": false,
    "publicDomain": false,
    "textToSpeechPermission": "ALLOWED",
    "epub": {
     "isAvailable": false
    },
    "pdf": {
     "isAvailable": false
    },
    "webReaderLink": "",
    "accessViewStatus": "NONE",
    "quoteSharingAllowed": false
   }
  },
0

3 respuestas 3

1

Deberías indicar que la respuesta del ajax es json.

$.ajax provee la opción dataType. Cuando se configura dataType: "json", la respuesta es evaluada como JSON y devuelve un objeto JavaScript.

Ejemplo:

$.ajax({
  method: "POST",
  url: ajaxurl,
  dataType: 'json', // <-- Indicamos que la respuesta es JSON
  data: { 'action': 'cargar_json_action', 'id': id }
})
0

Eso es porque tu json no es un arreglo

var array = JSON.parse(data);
array.items;

var array = JSON.parse('{"kind": "books#volumes","totalItems": 8,"items": [{"kind": "books#volume","id": "iFxlngEACAAJ","etag": "US1yzgaTJ/k","selfLink": "","volumeInfo": {"title": "Enciclopedia de Microsoft Visual C#","authors": ["Francisco Javier Ceballos Sierra"],"publishedDate": "2013","industryIdentifiers": [{"type": "ISBN_10","identifier": "8499642640"}, {"type": "ISBN_13","identifier": "9788499642642"}],"readingModes": {"text": false,"image": false},"pageCount": 1118,"printType": "BOOK","categories": ["Computers"],"maturityRating": "NOT_MATURE","allowAnonLogging": false,"contentVersion": "preview-1.0.0","imageLinks": {"smallThumbnail": "","thumbnail": ""},"language": "en","previewLink": "","infoLink": "", "": "."},"saleInfo": {"country": "ES","saleability": "NOT_FOR_SALE","isEbook": false},"accessInfo": {"country": "ES","viewability": "NO_PAGES","embeddable": false,"publicDomain": false,"textToSpeechPermission": "ALLOWED","epub": {"isAvailable": false},"pdf": {"isAvailable": false},"webReaderLink": "","accessViewStatus": "NONE","quoteSharingAllowed": false}}]}');
console.log(array.items[0].volumeInfo.title);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

0

La respuesta que te está entregando la función $.ajax() no es un objeto, por lo tanto tienes que convertirlo en objeto utilizando JSON.parse():

.done(function( data ) {
   console.log(data);
   data = JSON.parse(data);
  
   // Resto del código
})

Puedes indicarle a $.ajax() que la respuesta es un json como lo ha descrito Marcos Gallardo.

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.