I don't know where to start to Twitch Project

I don't know where to start to Twitch Project
0.0 0

#1

Hi all,

So, I’m stuck with this project and I really have no idea where to start. I know that I have to build HTML elements and require the JSON and associate the data received to those elements. But I don’t know how.
Please don’t tell me that I have to go review the JSON part or AJAX part of this course, I’ve already done that. The thing is that fCC is good for the projects and practice but it offers 0 guidance for projects.

I really don’t want to do copy-paste looking into other projects. Someone says that Twitch API doesn’t work, another person says “Look, I’ve done this and worked for me”. But, it doesn’t help to understand and write my own.

So, is there any moderator to explain this project step by step? For example:

  1. Do HTML stuff
  2. Request JSON
  3. Bla bla bla
  4. This means that, so you use this for X

This way, maybe we UNDERSTAND, not memorize.

Thanks


#3

make the html with css grid, you should just need some divs to make a box to put the users content in, and make a p tag for the text to say online offline. in the javascript make quoery selectors to choose those html elements to insert responses from the ajax request to twitch, and do something to make it load the users. I used a xlmhttpRequest to get the responses from twitch for my users, but I’ve seen a lot of people use ajax requests using jquery, but I’m going to refactor it later using promises since it looks cleaner. You should plan to structure your javascript somehow to make it easy to hide the users that are offline and online too, even though its not required to do that in the freecodecamp listed requirements, its nice to see for organization and it shouldn’t be too hard to add. I don’t know if this is the answer you were looking for but I hope it helps.


#4

If you haven’t used a third party API before, I suggest reading up on HTTP. Ajax is a really really really important part of web dev, but it is hard to understand unless you know about how browsers make requests. Mozilla have a pretty solid collection of articles on this:

https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview

Basically, browsers all make requests in the same way. At a minimum, you need to specify the URL (the address the request is going to) and the type of request (GET and POST are the two most common types). However, depending on what library or framework you are using, there are many different ways to write an HTTP request. The native Javascript method is a bit clunky; JQuery has its own functions, and if you are doing React, then its quite common to use a library called Axios.

You also need to learn about asychronous Javascript. When you make a request to another web server (such as Twitch) for data, a response will come back after a certain period of time. You don’t want that interval to block your website, so you need to use an asynchronous style such as a callback or a Promise. Basically, these are functions which get called when the data response comes back from the remote server. So this is the place where you collect the data (the JSON response) and write it dynamically into the HTML.

Again, this is a really fundamental part of web dev and I’d strongly recommend NOT just hacking a solution together but really learning the fundamentals. It will be time well spent.


#5

Thank you so much! So now that I know the steps, I can plan and ask the parts that I don’t figure out, not the whole project! Those step-by-step instructions not only help to have a structure for a project, but also makes it easier to address the problems. The problem with fCC projects is that there is a finished project, nobody explains nothing, fulfill user stories and don’t look at the code! But this is not the way that helps people like me, learning here to think like a programmer. I don’t have any previous programming experience, so mostly I need to understand what to do like a todo list version.

Anyways, thank you for your time and for your explanation @aioy.


#6

@arw2015 Thank you for your simple but important explanation. While I was reading your answer I realized that it was the first time that I understood “asynchronous” and “promise”. I read through all the documentation that you’ve provided, and yes Sir, it definitely did worth the time spent! I wanted that these concepts made sense while building something, not just writing or copying it! Thank you for helping me to achieve that goal.


#7

So, I started to get JSON data from the server in the right way and I’m intending to do a forEach().

I understand that it returns an Object, and forEach() is a method for arrays. So, I searched StackOverFlow and find out that I have to convert it into an array before applying forEach() method.

I tried this and the result is funny, I got a strange array and I can’t understand. Can someone please explain it in a beginner level with why it’s behaving the way it does?

Here is the code:

$(document).ready(function() {
  $("#getMessage").on("click", function() {
    $.getJSON("https://wind-bow.glitch.me/twitch-api/channels/rocketleague", function(json) {
      var html = "";
      var jsonKeys = Object.keys(json);
      jsonKeys.forEach(function(val) {
        var keys = Object.keys(val);
        html += "<div class = 'users'>";
        keys.forEach(function(key) {
          html += "<strong>"+key+"</strong>: "+val[key]+"<br>";
        });
        html += "</div><br>";
      });
      $(".message").html(html);
    });
  });
});

It’s important for me to understand why. So please think of the times in which also you didn’t understand what you were doing. Thanks :slight_smile:


#8

The above creates an array the json object’s properties which looks like:

["mature", "status", "broadcaster_language", "display_name", "game", "language", "_id", "name", "created_at", "updated_at", "partner", "logo", "video_banner", "profile_banner", "profile_banner_background_color", "url", "views", "followers", "_links", "delay", "banner", "background"]

You then are using forEach which first creates an array of each property’s name. For example, the first element in jsonKeys is the string “mature”, so in the first iteration of the outer forEach, keys becomes the following array: [“0”, “1”, “2”, “3”, “4”, “5”].

Before I go any further, can you explain what you are hoping to accomplish with the above code? Then, we can guide you to a solution. I am not exactly sure what you are ultimately trying to display on the page.

My first recommendation is to just display the json object in the console:

console.log(json);

Then, you need to figure out which property/value pairs you want to be able to display for your project. You will not need all of them. You will more than likely only use a couple properties, but you will need to refresh your knowledge about working with nested objects (see below for refresher).


#9

I am hoping to do a forEach(key=>value ) for each key and corresponding value and add it too HTML. I know that the project doesn’t require it, but to complete it I need to understand how it works… In examples it’s explained how to iterate over an array, not an object. So I was hoping to understand it myself…

So the question is; how can I do a forEach() over an object? Thank you!


#10

If the object only has one layer of properties (no other nested objects inside of it), then a single forEach with the object keys, will work. However, for every object nested inside, you would need another forEach to iterate over that objects keys. Again, you need to figure out which properties (whether nested or not) you want to use in your project, and then decide which keys you will need to iterate over the display/get the data you need for the project. If you are wanting a generic function which iterates over all the nested properties/values, I would recommend creating a recursive solution which would work no matter how many layers the object has, but that is not necessary to work on this project.


#11

Let’s say I want to access to [“status”, “display_name”, “game”] properties and it’s values. How can I do that? Can you please give an example?


#12

I am really sorry if I seem like a troll, but I just can’t understand it and I feel like I’m not capable of doing JavaScript. Sorry :frowning:


#13

Since json is an object and all three of these properties are in the top level of the json object, you could use dot notation or bracket notation as follows (using a modified version of your existing code):

$(document).ready(function() {
  $("#getMessage").on("click", function() {
    $.getJSON("https://wind-bow.glitch.me/twitch-api/channels/rocketleague",
      function(json) {
      var status = json.status;
      var display_name = json.display_name;
      var game = json.game;
    }
    );
  });
});

Or you could use destructuring assignment and assign the variables their applicable values in one line. The following accomplishes the same as the above code.

$(document).ready(function() {
  $("#getMessage").on("click", function() {
    $.getJSON("https://wind-bow.glitch.me/twitch-api/channels/rocketleague",
      function(json) {
      var {status, display_name, game} = json;
    }
    );
  });
});

#14

So I just have to assign it to a variable and that’s it? I feel really dumb lol. And if I don’t know the data incoming from JSON, how can we deal with it dynamically?


#15

Typically, there will be documentation associated which an api which will tell you the structure of the JSON response passed back, so you do not have to guess. If not, then you can always write console.log(json); and see what the structure looks like.


#16

Thank you @randelldawson. I’ll follow your advice.