Access url with ajax and get return

Question

Access url with ajax and get return

Navigation

#1 by (2 votes)

2

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 elements of the return. For example, I want to get the channelTitle. Thanks!

php javascript

asked by anonymous 26.09.2016 / 00:54

1 answer

Make a file from the vendor folder cover background by the Y axis

score 2 · 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 status of the HTTP request will be returned equal to 200 OK to AJAX and the success method will be called with data in JSON format (the same as you put above) .

We will convert the JSON that was received to JavaScript attributes with the JSON.parse(data) statement 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 putting in the console of the browser the value of the channelTitle attribute 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 console of your browser and run the example being able to see the channelTitle attribute of the items being printed in the console of your browser. In my case I did not need to convert a String with a JSON inside to a JavaScript object using the JSON.parse statement because it already assigns a JavaScript object to the variable conteudo .