These are chat archives for FreeCodeCamp/HelpJavaScript

11th
Mar 2018
Markus Kiili
@Masd925
Mar 11 2018 07:43
@longnt80 Object() and new Object()do the same. Literal {} is the preferred way.
Long Nguyen
@longnt80
Mar 11 2018 08:21
@Masd925 thank you
CamperBot
@camperbot
Mar 11 2018 08:21
longnt80 sends brownie points to @masd925 :sparkles: :thumbsup: :sparkles:
:star2: 4721 | @masd925 |http://www.freecodecamp.org/masd925
Brian
@BrianCodes33
Mar 11 2018 08:40
how do i get the last index of a nested array
Markus Kiili
@Masd925
Mar 11 2018 08:41
@BrianCodes33 Last index of an array is always arr.length-1.
Brian
@BrianCodes33
Mar 11 2018 08:42
if i have something like this
[ [ 1, 3, 4, 5 ],
[ 13, 18, 26, 27 ],
[ 32, 35, 37, 39 ],
[ 1, 857, 1000, 1001 ] ]
my goal is to get every last elem. i don’t need a loop do i
like i want to get 5, 27, 39, 1001
ideas?
Markus Kiili
@Masd925
Mar 11 2018 08:44
arr.map(function(subArr){
  return subArr[subArr.length-1];
}); // [ 5, 27, 39, 1001 ]
@BrianCodes33
Brian
@BrianCodes33
Mar 11 2018 08:45
why do i need a loop though
Markus Kiili
@Masd925
Mar 11 2018 08:45
You need to somehow loop all the subarrays
Brian
@BrianCodes33
Mar 11 2018 08:45
lame
Markus Kiili
@Masd925
Mar 11 2018 08:47
@BrianCodes33 Even if the language supports gimme all the last elements on an array, the engine loops under the hood.
Brian
@BrianCodes33
Mar 11 2018 08:49
i tried to redo the largest of four
function largestOfFour(arr) {
  let sorted = arr.map(function(nums){
    return nums.sort(function(a,b){
      return a - b;
    });
  });
  return sorted.map(function(subarr){
    return subarr[subarr.length - 1];
  });
}
but
what do you think of that solution
Razvan Jackson
@RazvanJackson
Mar 11 2018 08:53
Hey
I'm trying to do the NightLife Coordination App
Can someone help me with this
Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access. The response had HTTP status code 403.
Johnny
@JohnnyBizzel
Mar 11 2018 09:42
@RazvanJackson is this an API call? If so you might need to pass it through a proxy or something.
Razvan Jackson
@RazvanJackson
Mar 11 2018 09:42
Yes it s an api call
Leigh Hobson
@leighhobson89
Mar 11 2018 10:29
morning guys, with this code i am getting the following error. Does anyone know the correct callback information/URL to enter for this (aimed at people who have done the twitch.tv challenege)
for (i=0;i<users.length;i++) {
  $.getJSON(
    "https://wind-bow.glitch.me/twitch-api" +
      urlSection[0] + // "/users/"
      users[i][1] + //"ESL_SC2"
      "/callback=?"
  ).success(function(data) { 
    outputUsers(users, "default", data);
  });
  };
image.png
Johnny
@JohnnyBizzel
Mar 11 2018 10:39
@leighhobson89 console log (data) & what do you get?
Leigh Hobson
@leighhobson89
Mar 11 2018 10:43
@JohnnyBizzel i get the following screenshot: (fyi i have taken out the forward slash before 'callback=?' and tried adding an API key, both to no avail. i get 'unexpected identifier'
(no screenshot to follow, just the unexpected identifier)
Johnny
@JohnnyBizzel
Mar 11 2018 10:46
@leighhobson89 This is what I did for each stream:
 "success": function (data) {
            count++;
            if (data.stream) {
             var streamData = { "displayname": data.stream.channel.display_name,
                                     "streamurl":data.stream.channel.url,
                                     "streamlogo": data.stream.channel.logo,
                                     "status": data.stream.channel.status }
                 //streamData.stream ? streamsOnline.push(streamData) : streamsOffline.push(streamName);
                 streamsOnline.push(streamData);
            } else {
                 streamsOffline.push(streamName);            
            }
Leigh Hobson
@leighhobson89
Mar 11 2018 10:47
ok let me have a look, thanks for the info @JohnnyBizzel
CamperBot
@camperbot
Mar 11 2018 10:47
leighhobson89 sends brownie points to @johnnybizzel :sparkles: :thumbsup: :sparkles:
:star2: 1805 | @johnnybizzel |http://www.freecodecamp.org/johnnybizzel
Johnny
@JohnnyBizzel
Mar 11 2018 10:47
So I think you should check for existence of data
Leigh Hobson
@leighhobson89
Mar 11 2018 10:50
well this comes back if i enter the URL so I think I'm requesting it wrong or the URL is wrong or something:
image.png
image.png
Leigh Hobson
@leighhobson89
Mar 11 2018 10:56
the '.success(function(data) { ' part, when stepped through is failing, so the outPutUsers part is not being called eve, the loop is just iterating, that is the biggest clue something is wrong with the getJSON
Stephen James
@sjames1958gm
Mar 11 2018 13:12
@leighhobson89
I got an error that $.getJSON().success() was not a function - but it works if I use then
  $.getJSON(
    "https://wind-bow.glitch.me/twitch-api/users/ESL_SC2"
  ).then(function(data) { 
    console.log(data);
  });
@leighhobson89 Also, I don't think you need ?callback=? with this URL that is JSONP is not needed
Leigh Hobson
@leighhobson89
Mar 11 2018 13:33
@sjames1958gm awesome thanks a lot! I'm going to have to put your name on the credits at this rate haha
CamperBot
@camperbot
Mar 11 2018 13:33
leighhobson89 sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 9085 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Stephen James
@sjames1958gm
Mar 11 2018 13:44
@leighhobson89 :+1:
Leigh Hobson
@leighhobson89
Mar 11 2018 13:59
how do i push to a multidimensional location of an array? i'm trying to do this, but getting a '.push not a function ' error
users[i][0].push(user);
oh i dont want to push i want to assign it directly to that loction dont i, doh!
Razvan Jackson
@RazvanJackson
Mar 11 2018 14:33
If you want to asign just use
users[i][o] = user;
Leigh Hobson
@leighhobson89
Mar 11 2018 15:45
is there any reason why the data from this call would not be available in the checkSelections() function?
$.getJSON(
    url +
      urlSection[0] +
      users[i][1]
  ).then(checkSelection(selection, data, users));
thanks @RazvanJackson i did that
CamperBot
@camperbot
Mar 11 2018 15:45
leighhobson89 sends brownie points to @razvanjackson :sparkles: :thumbsup: :sparkles:
:cookie: 299 | @razvanjackson |http://www.freecodecamp.org/razvanjackson
Razvan Jackson
@RazvanJackson
Mar 11 2018 15:46
@leighhobson89 Hey, try to use check selection in a function like this
.then(function(response){checkSelection(selection,response,users)})
or whatever parameters you have to add there
Leigh Hobson
@leighhobson89
Mar 11 2018 15:47
ok ill give it a try
Adel
@AdelMahjoub
Mar 11 2018 15:49
@leighhobson89 checkSelection should return a function
@leighhobson89 in the snippet above, checkSelection is called, and it maybe returning undefined
Leigh Hobson
@leighhobson89
Mar 11 2018 15:52
the goal here is to take the data returned by the call, send it to checkSelection() along with the other arguments, where that function will do its business, and when that finishes, it needn't return anything, just continue, as the data will have been parsed out already by functions inside checkSelection. So I need access to the data and send it immediately to checkSelection(). wat do I need to do then?
Razvan Jackson
@RazvanJackson
Mar 11 2018 15:53
Did you tried my way?
Stephen James
@sjames1958gm
Mar 11 2018 15:54
@leighhobson89 .then gets a callback function that is only passed one parameter. If you need to call a function with more then you need to do what @RazvanJackson
showed you.
Leigh Hobson
@leighhobson89
Mar 11 2018 15:56
i'm trying it but i was confused by @AdelMahjoub comment, as my function doesnt return anything, nor do i need it to, as it does everything inside the function then execution of this whole outputUsers() function can stop
can i paste my whole JS so far so you can see the flow and then understand what I'm trying to do with these functions?
Adel
@AdelMahjoub
Mar 11 2018 15:59
@leighhobson89 :smile: sorry about that, follow what @RazvanJackson and @sjames1958gm posted
Leigh Hobson
@leighhobson89
Mar 11 2018 15:59
@AdelMahjoub np - my whole approach will be wrong, just you see
$(document).ready(function() {
  var url = "https://wind-bow.glitch.me/twitch-api";
  var urlSection = ["/users/", "/streams/", "/channels/"];
  var users = [
    // [image,user,status]
    ["", "ESL_SC2", 0],
    ["", "OgamingSC2", 0],
    ["", "cretetion", 1],
    ["", "freecodecamp", 0],
    ["", "storbeck", 1],
    ["", "habathcx", 1],
    ["", "RobotCaleb", 0],
    ["", "noobs2ninjas", 0]
  ];

      outputUsers(users, url, urlSection, "default");

    // obj.name = data.display_name;

  $("#all").on("click", function() {
    tidyUp();
    outputUsers(users);
  });

  $("#online").on("click", function() {
    tidyUp();
    outputUsers(users, 0);
  });

  $("#offline").on("click", function() {
    tidyUp();
    outputUsers(users, 1);
  });
  //end of document.ready()
});

function outputUsers(users, url, urlSection, selection) {

   var userPhoto = [];

    for (i = 0; i < users.length; i++) {
      $.getJSON(
    url +
      urlSection[0] +
      users[i][1]
  ).then(function(response){checkSelection(selection,response,users)})
    }

}

function stringParser(users, photo) {
  $("#userheader").append(
    "<div class='row justify-content-md-center userrecords'><div class='col-xs-3 thumbnail'><img src='" + photo + "' class='img-rounded' alt='username placeholder'></img></div><div class='col-xs-7'><div class='row justify-content-md-center'>" +
      users +
      "</div><div class='row justify-content-md-center'>Channel Info</div></div><div class='col-xs-2'>Status Placeholder</div>"
  );
}

/*function userStatus(users) {
  var statusUser = 0;

  if (users == 0) {
    statusUser = "offline";
  } else {
    statusUser = "online";
  }
  return statusUser;
}
*/

function tidyUp() {
  $("#userheader").html("");
}

function checkSelection(selection, data, users) {
  switch (selection) {
      case 0:
        if (users[i][2] > 0) {
          users[i][0] = data.logo;
          stringParser(users[i][1], data.logo);
        }
        break;
      case 1:
        if (users[i][2] == 0) {
          users[i][0] = data.logo;
          stringParser(users[i][1], data.logo);
        }
        break;
      default:
        users[i][0] = data.logo;
        stringParser(users[i][1], data.logo);
        break;
    }
}
Stephen James
@sjames1958gm
Mar 11 2018 16:00
@leighhobson89 .then needs a function reference, so in order for this .then(checkSelection(selection, data, users));
to work it needed to return a function reference, but that is not what you are trying to do you want to call this function
when the API response is returned so you need .then(function(response){checkSelection(selection,response,users)})
which puts your function inside another function which will get called, and then calls your function
Adel
@AdelMahjoub
Mar 11 2018 16:01
@leighhobson89 if you want your callback function to accept parameters, it should return a function
function callback(params) {
   return function() {
       /* use your params */
   }
}
Leigh Hobson
@leighhobson89
Mar 11 2018 16:01
i'm with you
Adel
@AdelMahjoub
Mar 11 2018 16:04
@leighhobson89 either this way or using an anonymous function
function checkSelection(selection, data, users) {
    return function() {
        switch (selection) {
            case 0:
              if (users[i][2] > 0) {
                users[i][0] = data.logo;
                stringParser(users[i][1], data.logo);
              }
              break;
            case 1:
              if (users[i][2] == 0) {
                users[i][0] = data.logo;
                stringParser(users[i][1], data.logo);
              }
              break;
            default:
              users[i][0] = data.logo;
              stringParser(users[i][1], data.logo);
              break;
        }
    }
}

@leighhobson89

@leighhobson89 .then needs a function reference, so in order for this .then(checkSelection(selection, data, users));
to work it needed to return a function reference, but that is not what you are trying to do you want to call this function
when the API response is returned so you need .then(function(response){checkSelection(selection,response,users)})
which puts your function inside another function which will get called, and then calls your function

Stephen James
@sjames1958gm
Mar 11 2018 16:05
@leighhobson89 Throw some console.logs in their to see what is happening
Leigh Hobson
@leighhobson89
Mar 11 2018 16:06
cheers guys @AdelMahjoub @sjames1958gm @RazvanJackson leave it with me lets see what i can do
Stephen James
@sjames1958gm
Mar 11 2018 16:06
@leighhobson89 You should be hitting the default of your switch?
Leigh Hobson
@leighhobson89
Mar 11 2018 16:06
yeah
the switch statement will only come in to play once i build the online or not part in
it works with hardcoded values but iv took those out for now
Stephen James
@sjames1958gm
Mar 11 2018 16:08
@leighhobson89 The problem you will have is that your for loop will run to completion and i will be set to
users.length when the .then happens so it will not reference the correct value in the checkSelection function
Leigh Hobson
@leighhobson89
Mar 11 2018 16:09
funny you should say that, the reason i put the switch in a seperate function, and tried to call it in the middle of the loop and do the whole thing .length times is to avoid this but i'm having some 'chicken and egg' issues
Stephen James
@sjames1958gm
Mar 11 2018 16:09
function outputUsers(users, url, urlSection, selection) {

   var userPhoto = [];

    users.forEach(function(user) {
      $.getJSON(
          url +
          urlSection[0] +
          user[1]
        ).then(function(response){checkSelection(selection,response,user)})
    }

}
This is what I would suggest - passing only the current user to the checkSelection function
@leighhobson89 The issue you are having is the loop will run to completion and launch several requests
when the responses come back the i value will be at the end of the array.
Leigh Hobson
@leighhobson89
Mar 11 2018 16:12
exactly that, and im currently trying to fix this thing with my limited knowledge. i will fix the function call first then ill look at your loop suggestion which i can already see is infinitely better
Razvan Jackson
@RazvanJackson
Mar 11 2018 16:13
@leighhobson89 No problem, good luck!
Leigh Hobson
@leighhobson89
Mar 11 2018 16:14
cheers
i'm still waiting for the lightbulb to switch on with this JS stuff, my programming experience to dte is limited to php automated test scripts, so this is a world away!
Adel
@AdelMahjoub
Mar 11 2018 16:19
@leighhobson89 if you like reading this is a good javascript book
Leigh Hobson
@leighhobson89
Mar 11 2018 16:25
thanks a lot @adel. And one last question. Now I am using a forEach, how do I access the specific elements in the multidimensional array, i.e. before i was using [i][2] etc but now they wont be understood in any function receiving users so what do i pass instead of users[i]?
CamperBot
@camperbot
Mar 11 2018 16:25
api offline
leighhobson89 sends brownie points to @adel :sparkles: :thumbsup: :sparkles:
Leigh Hobson
@leighhobson89
Mar 11 2018 16:37
i'm referring specifically to changing the users[i][1] etc in the function stringParser
Stephen James
@sjames1958gm
Mar 11 2018 16:54
@leighhobson89 You pass user to each function (not users) so you don't need the first [i]
Adel
@AdelMahjoub
Mar 11 2018 16:56
@leighhobson89 you may want to try Promise.all or CustomEvent, they are perfect for the task you are working on
@leighhobson89 maybe try generators if you fancy it
@leighhobson89 or recursivity works well too
Leigh Hobson
@leighhobson89
Mar 11 2018 17:20
@adel thanks for all the tips i've added some links for my reading material!
CamperBot
@camperbot
Mar 11 2018 17:20
leighhobson89 sends brownie points to @adel :sparkles: :thumbsup: :sparkles:
api offline
Leigh Hobson
@leighhobson89
Mar 11 2018 17:21
having changed everything around, this function now is returning without running the stringparser. As i was only told about this by you guys, is there any chance you could just tell me whats wrong now, so i can get it working to this point. i then plan to do some reading before continuing, the function now reads:
function checkSelection(selection, data, user) {
    return function() {
        switch (selection) {
            case 0:
              if (user[2] > 0) {
                user[0] = data.logo;
                stringParser(user);
              }
              break;
            case 1:
              if (user[2] == 0) {
                user[0] = data.logo;
                stringParser(user);
              }
              break;
            default:
              user[0] = data.logo;
              stringParser(user);
              break;
        }
    }
focus only on the default part for now
the data is being passed in here nicely but if i put a breakpoint on the stringParser function, it never stops there at all
alpox
@alpox
Mar 11 2018 17:41
@leighhobson89 How do you use this function?
@leighhobson89 If you call it like: .then(function(response){checkSelection(selection,response,users)}) nothing will be executed. If you use .then(checkSelection(selection,response,users)) you won't have response available
Leigh Hobson
@leighhobson89
Mar 11 2018 17:49
I am a bit slow with this but my entire code is a tiny bit of scrolling upwards. The parseString function outputs html with the data but its not being executed. The function will be used eventually to parse out this data filtered by online or not based on click events (selection) but i want the default case to execute when the page loads.
The data is going into the checkSelection function no problem from the outputUsers one that does the call
Adel
@AdelMahjoub
Mar 11 2018 18:05
@leighhobson89 can you post your code in codepen or post your codepen link if any
alpox
@alpox
Mar 11 2018 18:18
@leighhobson89 Your switch cannot be entered like this, as you combined what @AdelMahjoub and @sjames1958gm said, but those are different approaches.
@leighhobson89 You will have to remove the return function() { again
Leigh Hobson
@leighhobson89
Mar 11 2018 18:20
Ahh and then that will be fine? I just didnt understand the whole thing about the .then() command - once i have this working like in one of my forks (where its not a seperate function) ill stop and read up. I just want it working lol! Ok ill remove the return function again.
alpox
@alpox
Mar 11 2018 18:20
@leighhobson89 Then it will be fine, yes
Adel
@AdelMahjoub
Mar 11 2018 18:21
@leighhobson89 yes as @alpox mentioned
 $.getJSON(finalURL).then(function(data) {checkSelection(selection, data, user)});

function checkSelection(selection, data, user) {
        switch (selection) {
            case 0:
              if (user[2] > 0) {
                user[0] = data.logo;
                stringParser(user);
              }
              break;
            case 1:
              if (user[2] == 0) {
                user[0] = data.logo;
                stringParser(user);
              }
              break;
            default:
              user[0] = data.logo;
              stringParser(user);
              break;
    }
}
Leigh Hobson
@leighhobson89
Mar 11 2018 18:21
Yeah its working now. Ill save it there and hit the books!
alpox
@alpox
Mar 11 2018 18:21

The way @AdelMahjoub wanted to tell you would work a bit different. You'd use .then(checkSelection(selection, user)) and use the definition:

function checkSelection(selection, user) {
  return function(data) {
    ...
  }
}

That would also have worked

Leigh Hobson
@leighhobson89
Mar 11 2018 18:21
Thanks guys @alpox
CamperBot
@camperbot
Mar 11 2018 18:21
leighhobson89 sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star2: 1583 | @alpox |http://www.freecodecamp.org/alpox
Stephen James
@sjames1958gm
Mar 11 2018 18:33
@leighhobson89 Remember to put an ice pack on your head before your brain explodes :)
Leigh Hobson
@leighhobson89
Mar 11 2018 18:37
honestly you have no idea. you guys must look down from guruland and remember the days long long ago haha. i'll sleep tonight thats for sure, but finally something is starting to come together!!!
image.png
my filter buttons already work and i hav some code i can reuse for the search from the wikipedia challenge so i can hit the ground running next time!
Stephen James
@sjames1958gm
Mar 11 2018 18:39
@leighhobson89 :checkered_flag:
@leighhobson89 A lot of this I learned only in the last year or so, but I have been programming general for a while
Being on here and helping others work out their issues has made me a better programmer
Leigh Hobson
@leighhobson89
Mar 11 2018 19:11
thats great! hopefully one day i'll be able to do the same!
Buddy
@nashkell
Mar 11 2018 19:59
Hi all, I just finished the Basic Javascript challenges. At the end of this section the challenges discuss regular expressions and their selectors. When finding numbers and white spaces in a string you add a "+" to the selector to allow the regular expression to match or or more digits/spaces. When Inverting regular expression matches why would you not need a "+" after the selector?
I understand that making the selector uppercase selects the opposite (i. e. "\s"-match any whitespace, "\S"-match anything not a whitespace) , but wouldnt you need to add a "+" to the selector to have it match all the items in the string that are not a whitespace?
Leigh Hobson
@leighhobson89
Mar 11 2018 20:04

any reason why this wouldn't resolve to the value of divNumber?

document.getElementsByClassName(".userrecords:nth-child("+divNumber+") .col-xs-1").classList.add("onlineStatus");

i'm getting the error "Uncaught TypeError: Cannot read property 'add' of undefined" - is it a syntax error?

Tom
@moT01
Mar 11 2018 20:09
break it up into pieces and log the stuff - I think your trying to use classList on an array of elements @leighhobson89
if that query gets any elements
Leigh Hobson
@leighhobson89
Mar 11 2018 20:11
In the console if i do $$(‘.userrecords:nth-child(1) .col-xs-1’); it returns the right element. DivNumber is just a number that iterates each time this function runs
Tom
@moT01
Mar 11 2018 20:12
so you get a single element - or an array of a single element?
Leigh Hobson
@leighhobson89
Mar 11 2018 20:12
A single element, thats the unique selector for the element i want
Tom
@moT01
Mar 11 2018 20:12
hmm
maybe need a . in the onlinestatus?
Leigh Hobson
@leighhobson89
Mar 11 2018 20:13
Its in a loop, so the next time it comes across this, there will be another div there and divNumber will be set to 2
I tried that :(
Tom
@moT01
Mar 11 2018 20:14
you sure it's not an array of a single element - its saying its undefined so its not finding anything i think
Leigh Hobson
@leighhobson89
Mar 11 2018 20:14
Thats why i thought it was a problem with the variable syntax in nth child
Yeah definitely selects only one element
image.png
Tom
@moT01
Mar 11 2018 20:17
what's with the double $$? i havent seen that
try this... document.getElementsByClassName(".userrecords:nth-child("+divNumber+") .col-xs-1")[0].classList.add("onlineStatus");
Leigh Hobson
@leighhobson89
Mar 11 2018 20:18
just a shortcut to tell it you are looking for a css selector
rather than an xpathetc
xpath etc*
Tom
@moT01
Mar 11 2018 20:18
not that im saying your wrong - just all I can think of
Leigh Hobson
@leighhobson89
Mar 11 2018 20:19
ok ill check
Tom
@moT01
Mar 11 2018 20:23

well, if that isnt it - I would do this..

var element = document.getElementsByClassName(".userrecords:nth-child("+divNumber+") .col-xs-1");
console.log(element);

and see what you get
could maybe try querySelector... document.querySelector('.userrecords....')

Leigh Hobson
@leighhobson89
Mar 11 2018 20:25
lets have a look, ill get back to you!
try something like this maybe....
document.getElementsByClassName(".userrecords div:nth-child("+divNumber+") .col-xs-1");
if youre using divs
well there you go - i gave you 5 things to try - all wrong
Leigh Hobson
@leighhobson89
Mar 11 2018 20:37
thanks very much for your input. i think queryselector is the way to go, i'm just trying to figure out the way to do it with the documentation
i'm 100% about the selector, its just using the right commands around it lol
thanks @moT01
CamperBot
@camperbot
Mar 11 2018 20:38
leighhobson89 sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:star2: 1028 | @mot01 |http://www.freecodecamp.org/mot01