samedi 13 mai 2017

Parsing Twitch API JSON data

I have been struggling attempting to parse and display actual data from an AJAX call to the Twitch API. I am able to parse the fixture data and display it but as soon as I get a live request, it fails to parse. Any help is appreciated!

Here is the fixture data that I am able to parse

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    var return_me = [
      {
        "_total": 99,
        "_links": {
          "self": "http://ift.tt/2qg7CkE",
          "next": "http://ift.tt/2pvgaqB"
        },
        "streams": [
      {
        "_id": 25264780880,
        "game": "StarCraft II",
        "viewers": 475,
        "video_height": 1080,
        "average_fps": 61.53846,
        "delay": 0,
        "created_at": "2017-05-12T23:13:20Z",
        "is_playlist": false,
        "stream_type": "live",
        "preview": {
          "small": "http://ift.tt/2qg2Jbm",
          "medium": "http://ift.tt/2pv7pNq",
          "large": "http://ift.tt/2mDfUmV",
          "template": "http://ift.tt/2qg4c1l"
        },
        "channel": {
          "mature": false,
          "partner": false,
          "status": "aviKungfu - Mech g0d Saving E-Sports ♥_♥",
          "broadcaster_language": "en",
          "display_name": "Avilo",
          "game": "StarCraft II",
          "language": "en",
          "_id": 7111448,
          "name": "avilo",
          "created_at": "2009-07-06T00:40:12Z",
          "updated_at": "2017-05-13T00:34:50Z",
          "delay": null,
          "logo": "http://ift.tt/2pvtBHp",
          "banner": null,
          "video_banner": null,
          "background": null,
          "profile_banner": null,
          "profile_banner_background_color": null,
          "url": "http://ift.tt/1pret8K",
          "views": 6485735,
          "followers": 36935,
          "_links": {
            "self": "http://ift.tt/2qg3OQj",
            "follows": "http://ift.tt/2pvft0G",
            "commercial": "http://ift.tt/2qg2I7i",
            "stream_key": "http://ift.tt/2pvv00m",
            "chat": "http://ift.tt/2qg3DEC",
            "features": "http://ift.tt/2pvgbuF",
            "subscriptions": "http://ift.tt/2qg3Rfa",
            "editors": "http://ift.tt/2pvgcyJ",
            "teams": "http://ift.tt/2qgkffx",
            "videos": "http://ift.tt/2pvgdmh"
          }
        },
        "_links": {
          "self": "http://ift.tt/2qgpjkg"
        }
      },
      {
        "_id": 25265105216,
        "game": "StarCraft II",
        "viewers": 89,
        "video_height": 1080,
        "average_fps": 60,
        "delay": 0,
        "created_at": "2017-05-13T00:03:46Z",
        "is_playlist": false,
        "stream_type": "live",
        "preview": {
          "small": "http://ift.tt/2pvgdTj",
          "medium": "http://ift.tt/2qg6g9q",
          "large": "http://ift.tt/2pvgeql",
          "template": "http://ift.tt/2qg2UTY"
        },
        "channel": {
          "mature": false,
          "partner": false,
          "status": "Livibee // Yay",
          "broadcaster_language": "en",
          "display_name": "Livibee",
          "game": "StarCraft II",
          "language": "en",
          "_id": 20090948,
          "name": "livibee",
          "created_at": "2011-02-03T13:36:23Z",
          "updated_at": "2017-05-13T00:35:09Z",
          "delay": null,
          "logo": "http://ift.tt/2pvmP47",
          "banner": null,
          "video_banner": "http://ift.tt/2qfJeQo",
          "background": null,
          "profile_banner": "http://ift.tt/2pvmFtJ",
          "profile_banner_background_color": null,
          "url": "http://ift.tt/2apqQ25",
          "views": 2126012,
          "followers": 51771,
          "_links": {
            "self": "http://ift.tt/2pvAjx3",
            "follows": "http://ift.tt/2qg2Kfq",
            "commercial": "http://ift.tt/2qgiwHk",
            "stream_key": "http://ift.tt/2pvmEpF",
            "chat": "http://ift.tt/2qg3HUR",
            "features": "http://ift.tt/2pvhha3",
            "subscriptions": "http://ift.tt/2qg7DoI",
            "editors": "http://ift.tt/2pvtBXV",
            "teams": "http://ift.tt/2qg4dlV",
            "videos": "http://ift.tt/2pvFwor"
          }
        },
        "_links": {
          "self": "http://ift.tt/2qfWG6w"
        }
      }
    ]
  }
]
console.log("return_me", return_me);
return return_me;
}
});

Here is my ajax call to twitch.tv return (the return_me array is so that the result is in an array like the fixture data that is working).

Ember.$.ajax({
  type: 'GET',
  url: 'http://ift.tt/2pvtD1Z',
  headers: {'Client-ID': '2w3di133kf30i7r9ai8b0i39zke4g3'},
  success(data) {
    var return_me = [];
    return_me.push(data);
    console.log("return_me", return_me);
    // return return_me;
  }
});

Finally here is the handlebars that I am using to loop over the data:

<ul>
  
    <li></li>
    
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    
  
</ul>




Aucun commentaire:

Enregistrer un commentaire