-1

mi problema es el siguiente: tengo un JSON que me regresa la API de Youtube y al intentar ingresar a alguna propiedad me aparece "undefined"

La API de youtube me regresa lo siguiente:

// Parte del JSON retornado por la API:
 {
  "items": [
  {
   "id": {
    "videoId": "Mfu9jgj_z18",
   },
   "title": "Joey Montana - Hola",
   "channelTitle": "JoeyMontanaVEVO",
   "thumbnails": {
    "default": {
     "url": "https://i.ytimg.com/vi/Mfu9jgj_z18/default.jpg"
    }
   }
  } ]
 }

https://drive.google.com/file/d/0B5FkOZb-0Z48ZTNENEloZDdUZ3M/view?usp=sharing

Y mi codigo es el siguiente:

$.each(data.items, function (item) {

//URL del video en youtube
html += '<p><a href="http://youtu.be/' + item.id + '">';
        alert(html)

//Miniatura del video
html += '<img src="http://i.ytimg.com/vi/' + item.id +'/default.jpg">';

//Agrega el titulo del video y del canal
html += '<h2>' + item.title + ' ' + item.channelTitle + '</h2></a></p>';
count++;

});  

Hasta aquí todo funciona perfecto pero cuando doy click en el enlace me envía a la pagina http://youtu.be/undefined

3
  • 1
    Hola Axel, te invito a que te des el recorrido de bienvenida y revises este enlace Cómo preguntar
    – Jorius
    el 4 may. 2017 a las 19:14
  • Hola Axel, te recomiendo agregues directamente el código y el json para que quede plasmada en la pregunta.
    – Jorgesys
    el 4 may. 2017 a las 19:14
  • por favor coloca un trozo del codigo Json y el trozo del codigo javascript de esta forma perdurara el 4 may. 2017 a las 19:15

3 respuestas 3

3

Lo logico seria que hicieras un each de tu arreglo

for(var item in data.items) {
    console.log(item.title); //Aqui puedes ver las propiedades de cada 
}
1

La Razón por la que recibe undefined es porque intenta acceder a una propiedad de un valorentero , lo cual es no correcto.

La Documentación es clara , el primer parámetro será un valor entero y otro será el objeto iterado con sus propiedades incluidas.

Ejemplo

var array = [{'nombre':'Joel', 'edad':24},{'nombre':'Axel', 'edad':20}];
$.each(array, function(item) {
  console.log(item.nombre);/* Undefined*/
  console.log(item); /* Index del Array*/
});
$.each(array, function(index,item) {
  /* Accediendo a las propiedades del Item (segundo parámetro)
    es la forma correcta*/
   console.log(item.nombre);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Para su ejemplo sería algo así el each

$.each(data.items, function (index,value) {
    console.log(value.id.videoId);
    console.log(value.snippet.title);
});
1
  • SIMPLEMENTE EXCELENTE !!! esta solución me resolvió un problema que estuve todo el dia intentando resolver sin llegar a nada concreto !!! Gracias !!!
    – MNibor
    el 13 dic. 2019 a las 23:05
1

El problema principal es que estas accediendo incorrectamente el JSON retornado por la API de Youtube, lo correcto es item.id.videoId.

Tambien puedes reemplazar la variable count por la propiedad length de data.items, es decir count = data.items.length

Te dejo un ejemplo de tu código con las correcciones:

// Emular el JSON recibido por la API de Youtube
data = {
 "items": [
 {
  "id": {
   "videoId": "Mfu9jgj_z18",
  },
  "title": "Joey Montana - Hola",
  "channelTitle": "JoeyMontanaVEVO",
  "thumbnails": {
   "default": {
    "url": "https://i.ytimg.com/vi/Mfu9jgj_z18/default.jpg"
   }
  }
 } ]
}

var html="";

$.each(data.items, function (i,item) {

 //URL del video en youtube
 html += '<p><a href="http://youtu.be/' + item.id.videoId + '">';

 //Miniatura del video
 html += '<img src="' + item.thumbnails.default.url+'">';

 //Agrega el titulo del video y del canal
 html += '<h2>' + item.title + ' ' + item.channelTitle + '</h2></a></p>';

});
document.write(html);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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