Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript A Real World Example

You can Ignore this...But I need to ask this ...Am I Dumb? Am I really not cut out for this?

Now I can make neither heads nor tails with anything related to javascript. So all I've been doing is literally a waste of time? I'm undone.. lost .. I don't even know what to do now. I don't understand anything...I'm lost...

You must take the first steps about javascript and the programming logic by itself.

8 Answers

Steven Parker
Steven Parker
230,024 Points

I'm not sure if this constitutes an actual "answer", but you might benefit from some of the comments that have been posted to this other recent question titled The Wall.

You might also enjoy this recently posted blog about Why Itโ€™s a Learning Curve or this one about Why Learning to Code is So Damn Hard.

OH. It's been very reassuring to go through the contents you provided, Steven Parker. Now I get it.

So I'm in The Cliff of Confusion PHASE

So, I'm in the cliff of confusion phase. What amazed me most was that the desert of despair is still ahead of me. (As if the Cliff of Confusion isn't enough)!!!

Steven Parker
Steven Parker
230,024 Points

But just imagine how exciting it will be to reach the "upswing of awesome"! :smile:

Cool graph, for the benefit of other readers I added a link to the original blog to my answer. And if you look at the whole graph you'll see that during the "desert of despair" is where the "scope of knowledge" expands the most.

scope of knowledge

nathan goel
nathan goel
7,410 Points

I am exactly there as well, so much information about javascript and different modules. I believe that going through the desert of despair is a vital stage (at least if you don't give up). I believe I will see fruits, but yeah it has been a few months already and I am struggling with backend Javascript more than ever.

Thank you very much, Emily Easton. Maybe I was too much disappointed with myself. Now, I think I'm gonna make it.

Emily Easton
Emily Easton
13,575 Points

Good! This can be a very overwhelming process, so its important that you keep your morale up and remember if you ever need help theres always going to be someone on here to help!

Emily Easton
Emily Easton
13,575 Points

Think of it like this, most people can say bonjour but if someone came up to you and started a conversation in French, you would have no idea whats being said right? Year 2 (grade 3) students couldn't pass a full exam written for year 10s (grade 11s) because they haven't learnt it yet.

What I'm trying to say here is that its a matter of learning, thats not just from watching videos but also from practice. As shown by other answers above, you'll learn something then you'll learn something else and it will completely baffle you. Have faith and determination! And be sure to give yourself breaks and take notes so you can relax your mind and maybe even go over your notes in your free time.

Also, when unsure about something in JS even though you've written it and it works, you can always ask for advice on here (community). Hope this helps! Head up :)

Yeah, Steven Parker, you're right. I'll be waiting for that "upswing of awesome"! :laughing:

Coding is hard, it's not supposed to be easy. Keep looking up different resources and maybe one of them will make the concept click. As a software dev I always watched the same concepts from different people to solidify the topics. Sometimes one resource won't make sense but another might, and as you keep looking at things differently you'll begin to understand.

Maxim Melnic
Maxim Melnic
4,178 Points

I simplified the code and made important comments without which nothing is clear. I understood how it works but it's easier for me to look at the pyramid of DOOM ๐Ÿ˜…

function ajaxPromise (url) {
  return new Promise (function (resolve, reject) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.onreadystatechange = main;
    xhr.send();

    function main () {
      if(xhr.readyState ===4) {
        if(xhr.status === 200) {
          var employees = JSON.parse(xhr.responseText);
          resolve(employees);
        } else {
          reject(xhr.statusText);
        };
      };
    };
  });
};

var newReq = ajaxPromise('../data/employees.json');
newReq
  .then(function generatListItems (employees) { // employees is resolve value from promise!!!
    var statusHTML = '';
      for (var i=0; i<employees.length; i += 1) {
          if (employees[i].inoffice === true) {
              statusHTML += '<li class="in">';
          } else {
              statusHTML += '<li class="out">';
          }
          statusHTML += employees[i].name;
          statusHTML += '</li>';
      }
      return statusHTML;
}).then(function generateUnorderedList (listItems) { // listItems is a new value from return statusHTML in previous then
    return '<ul class="bulleted">' + listItems +  '</ul>'
}).then(function addEmployeesToPage(unorderedList) { // unorderedList is a new value '<ul class="bulleted">' + listItems +  '</ul>' in previous then
    document.getElementById('employeeList').innerHTML = unorderedList}
   ).catch(function (e) { // e is reject value from promise!!!
      alert(e);
}); 
North Krimsly
North Krimsly
2,707 Points

If you don't understand Promises right away, don't get discouraged! Asynchronous programming is hard...in any language. I also think this example makes it much harder because of the outdated XMLHttpRequest usage. It's much easier to understand the newer Fetch API. Here's how I re-wrote getJSON() to be easier to understand, using the Fetch API:

function getJSON(url) {
  const resultPromise = fetch(url)
  .then(function(response) {  
    if (response.ok) {
      return response.json();
    }
    else {
      throw new Error('Unable to load data right now.');      
    }
  })
  .catch(function(error) {
      throw new Error('Unable to load data right now.');    
  });
  return resultPromise;
}

You can see how much simpler the Fetch API is. Notice the code is returning a Promise object so that the promise execution chain can continue in the main code (where getJSON() is called). Then you can catch any errors from getJSON() like this:

function displayError(error) {
  document.getElementById('employeeList').innerHTML = '<p>' + error + '</p>';
}

getJSON('../../data/employees.json').then(generateListItems)
  .then(generateUnorderedList)
  .then(addEmployeesToPage)
  .catch(function(e){
    displayError('Unable to load data right now.');
});

Hope this helps. If you have any comments or suggestions on my rewrite, please post.