Access url with ajax and get return

Question

I have the following link to access:

https://www.googleapis.com/youtube/v3/search?part=snippet&maxResults=5&q=brksedu&key={YOUR_API_KEY}

When accessed directly it returns an array like this:

{
 "kind": "youtube#searchListResponse",
 "etag": "\"I_8xdZu766_FSaexEaDXTIfEWc0/Y3YIz5M5plLC7zcRxibBlX47-aU\"",
 "nextPageToken": "CAIQAA",
 "regionCode": "BR",
 "pageInfo": {
  "totalResults": 159704,
  "resultsPerPage": 2
 },
 "items": [
  {
   "kind": "youtube#searchResult",
   "etag": "\"I_8xdZu766_FSaexEaDXTIfEWc0/UDOCuqtHTALjQUfIUcgkxYCRNPg\"",
   "id": {
    "kind": "youtube#channel",
    "channelId": "UCWKtHaeXVzUscYGcm0hEunw"
   },
   "snippet": {
    "publishedAt": "2010-07-30T02:06:06.000Z",
    "channelId": "UCWKtHaeXVzUscYGcm0hEunw",
    "title": "BRKsEDU",
    "description": "Canal de gameplays e vlogs de games e entretenimento! Ou seja: tenho o melhor trabalho do mundo! =) Jogos favoritos: Life Is Strange, Shadow of the ...",
    "thumbnails": {
     "default": {
      "url": "https://yt3.ggpht.com/-4VkVjXuRhlU/AAAAAAAAAAI/AAAAAAAAAAA/MtEHi_HPB5E/s88-c-k-no-mo-rj-c0xffffff/photo.jpg"
     },
     "medium": {
      "url": "https://yt3.ggpht.com/-4VkVjXuRhlU/AAAAAAAAAAI/AAAAAAAAAAA/MtEHi_HPB5E/s240-c-k-no-mo-rj-c0xffffff/photo.jpg"
     },
     "high": {
      "url": "https://yt3.ggpht.com/-4VkVjXuRhlU/AAAAAAAAAAI/AAAAAAAAAAA/MtEHi_HPB5E/s240-c-k-no-mo-rj-c0xffffff/photo.jpg"
     }
    },
    "channelTitle": "BRKsEDU",
    "liveBroadcastContent": "upcoming"
   }
  },
  {
   "kind": "youtube#searchResult",
   "etag": "\"I_8xdZu766_FSaexEaDXTIfEWc0/iFm3mPRQQ_2agP1yM-gTXXMIzlk\"",
   "id": {
    "kind": "youtube#video",
    "videoId": "uIMfeKEyOCE"
   },
   "snippet": {
    "publishedAt": "2016-09-25T14:48:40.000Z",
    "channelId": "UCWKtHaeXVzUscYGcm0hEunw",
    "title": "FORZA HORIZON 3 #5 - Correndo Contra um Trem!? (PC Gameplay)",
    "description": "Vídeo gameplay do jogo Forza Horizon 3, game exclusivo Microsoft disponível para Xbox One e PC. Forza Horizon 3 está disponível dublado e legendado em ...",
    "thumbnails": {
     "default": {
      "url": "https://i.ytimg.com/vi/uIMfeKEyOCE/default.jpg",
      "width": 120,
      "height": 90
     },
     "medium": {
      "url": "https://i.ytimg.com/vi/uIMfeKEyOCE/mqdefault.jpg",
      "width": 320,
      "height": 180
     },
     "high": {
      "url": "https://i.ytimg.com/vi/uIMfeKEyOCE/hqdefault.jpg",
      "width": 480,
      "height": 360
     }
    },
    "channelTitle": "BRKsEDU",
    "liveBroadcastContent": "none"
   }
  }
 ]
}

My question is: How to access this url with ajax and get the return elements. For example, I want to get the channelTitle. Thank you!!!

Answer 1

Code:

success : function(data) {

    var jsonData = JSON.parse(data);

    var items_length = jsonData.items.length;
    var items = jsonData.items;

    for (var i=0; i < items_length; i++){
        console.log(items[i].snippet.channelTitle);
    }
}

Answer:

If the request was successful the HTTP request status will be returned equal to 200 OK to the AJAX and the method success will be called with the data in format JSON (the same one you put up).

We will convert the JSON that was received for Javascript attributes with the instruction JSON.parse(data) so that we can access the object and its attributes.

And in the end we will treat and iterate the object and its attributes by retrieving and placing in the console browser the attribute value channelTitle of the items that came from the request.

Example and execution:

You can with your favorite browser open the example I created in Jsfiddle clicking here, open the console from your browser and run the example being possible to see the attribute channelTitle of the items being printed on console from your browser. In my case I did not need to convert a String with a JSON inside to a Javascript object using the instruction JSON.parse because it already assigns a Javascript object in the variable conteudo.