Tour JSON Array [closed]

-2

My problem is this: I have a JSON that returns the API of YouTube and when trying to enter some property I get "undefined"

The Youtube API returns the following:

// 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"
    }
   }
  } ]
 }

link

And my code is as follows:

$.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++;

});  

So far everything works perfect but when I click on the link it sends me to the page link

    
asked by Axel Drake 04.05.2017 в 21:09
source

3 answers

2

The logical thing would be for you to make each of your arrangement

for(var item in data.items) {
    console.log(item.title); //Aqui puedes ver las propiedades de cada 
}
    
answered by 04.05.2017 в 21:17
1

The main problem is that you are incorrectly accessing the JSON returned by the API of YouTube , the correct thing is item.id.videoId .

You can also replace the variable count with the property length of data.items , that is% count = data.items.length

Here is an example of your code with the corrections:

// 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>
    
answered by 04.05.2017 в 23:25
0

The Reason you get undefined is because intenta acceder a una propiedad de un valor integer , which is not correct.

The Documentation is clear, the first parameter will be a value entero and another will be objeto iterated with its included properties.

Example

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>

For your example, it would be something like each

$.each(data.items, function (index,value) {
    console.log(value.id.videoId);
    console.log(value.snippet.title);
});
    
answered by 04.05.2017 в 22:05