Go through JSON with JQuery [duplicated]

Question

Go through JSON with JQuery [duplicated]

Navigation

#1 by (2 votes)
#2 by (0 votes)

0

Good morning I'm using a Youtube API that returns the next 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"
    }

For each video, all in the same file, my problem is that when I try to go through the file and thus get the "id" for example of the video I get the result undefined using item.id the code I have from the script is the next.

$.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);
  }
});

}); });

I would greatly appreciate your help, I have been looking for a solution since yesterday and nothing, try with items.id and it does not work either

javascript jquery json

asked by Axel Drake 04.05.2017 в 22:14

source

2 answers

Form on the left and another on the right Query in MySQL from PHP

score 2 · Answer 1

Keep in mind that in the item variable you will have the index of the element. The object with the definition of the video will then be obtained with data.items [item].

Look at this example using the data you put in the question:

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>

score 0 · Answer 2

And the item.channelTitle and item.title if you are bringing them well ?. If yes, then the problem is possibly that, if you notice, id is composed of two other fields, kind and videoId . If you want to get only videoId then you should do something like:

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

But try to try putting console.log as suggested in the comments. They are always a good help to find where the problem is. I hope you find the solution.

EDITION

As well as Dev.Joel pointed out to me in the comments, item is not an object, it is a whole value with the index. I have modified the code accordingly. Although it's really the same as Asier's response.