0

Buen Dia estoy utilizando una API de Youtube que me regresa el siguiente JSON

{
 "kind": "youtube#searchListResponse",
  "etag": "\"m2yskBQFythfE4irbTIeOgYYfBU/Ecs31oUVfbCGmEm5at5VxfPVF28\"",
  "nextPageToken": "CAUQAA",
  "regionCode": "MX",
  "pageInfo": {
   "totalResults": 1000000,
   "resultsPerPage": 5
  },
  "items": [
   {
    "kind": "youtube#searchResult",
    "etag": "\"m2yskBQFythfE4irbTIeOgYYfBU/gjPdqJGmCv_9dbjuk7qtdsRCJIA\"",
    "id": {
     "kind": "youtube#video",
     "videoId": "Mfu9jgj_z18"
    },
    "snippet": {
     "publishedAt": "2016-09-30T07:00:03.000Z",
     "channelId": "UC0_AziIovFE4qYOqbx3ukOQ",
     "title": "Joey Montana - Hola",
     "description": "Music video by Joey Montana performing Hola. (C) 2016      Capitol Latin http://vevo.ly/3HCjRF.",
     "thumbnails": {
      "default": {
       "url": "https://i.ytimg.com/vi/Mfu9jgj_z18/default.jpg",
       "width": 120,
       "height": 90
      },
      "medium": {
       "url": "https://i.ytimg.com/vi/Mfu9jgj_z18/mqdefault.jpg",
       "width": 320,
       "height": 180
      },
      "high": {
       "url": "https://i.ytimg.com/vi/Mfu9jgj_z18/hqdefault.jpg",
       "width": 480,
       "height": 360
      }
     },
     "channelTitle": "JoeyMontanaVEVO",
     "liveBroadcastContent": "none"
    }
   },
   {
    "kind": "youtube#searchResult",
    "etag": "\"m2yskBQFythfE4irbTIeOgYYfBU/Iz-aL8UAazPEMZ9sdP3bt_zcEnw\"",
    "id": {
     "kind": "youtube#video",
     "videoId": "eNqYlKtt0hY"
    } 

Por cada video, todo en un mismo archivo, mi problema es que al intentar recorrer el archivo y asi obtener el "id" por ejemplo del video me aparece como resultado undefined utilizando item.id el codigo que tengo del Script es el siguiente.

$.getJSON(url,function (data) {

  var count = 0;
  var html = "";

    $.each(data.items, function (item) {
        //URL del video en youtube
        html += '<p><a href="http://youtu.be/' + item.id + '">';

        //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++;
    });

  // En caso de que Youtube no enviara nada
  if (count == 0) {
    $results.html("No videos found");
  } else {
    //Muestra los resultados
    $results.html(html);
  }
});

}); });

Les agredeceria mucho su ayuda llevo buscando desde ayer una solucion y nada, ya intente con items.id y tampoco funciona

3
  • Deberías hacer un 2do each que recorra cada item en items, con ese estas recorriendo cada items en data
    – FederHico
    Commented el 4 may. 2017 a las 20:18
  • el console.log(data) que te imprime? , por otro lado creo que tu error esta data.items prueba data.data.items Commented el 4 may. 2017 a las 20:27
  • 1
    El por qué recibe undefined aquí está la explicación es.stackoverflow.com/a/67497/12864 o como lo planteó @Asier , ¿ Recordar no formular dos preguntas realizando la misma consulta o planteando el mismo problema
    – Dev. Joel
    Commented el 4 may. 2017 a las 20:55

2 respuestas 2

2

Ten en cuenta que en la variable item vas a tener el índice del elemento. El objeto con la definición del vídeo lo obtendrás entonces con data.items[item].

Mira este ejemplo utilizando los datos que pones en la pregunta:

var result = 
{
  "kind": "youtube#searchListResponse",
  "etag": "\"m2yskBQFythfE4irbTIeOgYYfBU/Ecs31oUVfbCGmEm5at5VxfPVF28\"",
  "nextPageToken": "CAUQAA",
  "regionCode": "MX",
  "pageInfo": {
   "totalResults": 1000000,
   "resultsPerPage": 5
  },
  "items": [
   {
    "kind": "youtube#searchResult",
    "etag": "\"m2yskBQFythfE4irbTIeOgYYfBU/gjPdqJGmCv_9dbjuk7qtdsRCJIA\"",
    "id": {
     "kind": "youtube#video",
     "videoId": "Mfu9jgj_z18"
    },
    "snippet": {
     "publishedAt": "2016-09-30T07:00:03.000Z",
     "channelId": "UC0_AziIovFE4qYOqbx3ukOQ",
     "title": "Joey Montana - Hola",
     "description": "Music video by Joey Montana performing Hola. (C) 2016      Capitol Latin http://vevo.ly/3HCjRF.",
     "thumbnails": {
      "default": {
       "url": "https://i.ytimg.com/vi/Mfu9jgj_z18/default.jpg",
       "width": 120,
       "height": 90
      },
      "medium": {
       "url": "https://i.ytimg.com/vi/Mfu9jgj_z18/mqdefault.jpg",
       "width": 320,
       "height": 180
      },
      "high": {
       "url": "https://i.ytimg.com/vi/Mfu9jgj_z18/hqdefault.jpg",
       "width": 480,
       "height": 360
      }
     },
     "channelTitle": "JoeyMontanaVEVO",
     "liveBroadcastContent": "none"
    }
   },
   {
    "kind": "youtube#searchResult",
    "etag": "\"m2yskBQFythfE4irbTIeOgYYfBU/Iz-aL8UAazPEMZ9sdP3bt_zcEnw\"",
    "id": {
     "kind": "youtube#video",
     "videoId": "eNqYlKtt0hY"
    }
   }
  ]
};
    
function process(data) {

  var count = 0;
  var html = "";

    $.each(data.items, function (item) {
        var video = data.items[item].snippet;        
        
        if (video) {          
        
        //URL del video en youtube
        html += '<p><a href="http://youtu.be/' + data.items[item].id.videoId + '">';

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

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

  // En caso de que Youtube no enviara nada
  if (count == 0) {
    $results.html("No videos found");
  } else {
    //Muestra los resultados
    $results.html(html);
  }
}

var $results = $('#results');
process(result);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="results"></div>

0

¿Y el item.channelTitle y item.title sí te los está trayendo bien?. Si sí, entonces el problema posiblemente es que, si te fijas, id está compuesto de otros dos campos, kind y videoId. Si lo que quieres es obtener sólo el videoId entonces deberías hacer algo como:

$.each(data.items, function (item) {
        //URL del video en youtube
        html += '<p><a href="http://youtu.be/' + data.items[item].id.videoId + '">';

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

        //Agrega el titulo del video y del canal
        html += '<h2>' + data.items[item].title + ' ' + data.items[item].channelTitle + '</h2></a></p>';
        count++;
    });

Sino intenta probar poniendo console.log como sugirieron en los comentarios. Siempre son una buena ayuda para encontrar dónde está el problema. Ojalá encuentres la solución.

EDICIÓN

Como bien me hizo notar Dev.Joel en los comentarios, item no es un objeto, es un valor entero con el índice. He modificado el código conforme a eso. Aunque en realidad es lo mismo que la respuesta de Asier.

2
  • 1
    item es un valor entero , no contiene propiedad id
    – Dev. Joel
    Commented el 4 may. 2017 a las 20:51
  • Tienes razón, no había revisado la documentación ): . Pensaba que lo manejaba de forma parecida a Python. La respuesta de Asier es la correcta. Commented el 4 may. 2017 a las 20:53

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