Loading Items

Goals

  • Make an AJAX request and update the page based on the server's response.

  • Load your list's items every time a user visits the page.

Overview

Now that we've learned about AJAX requests and React, let's tie everything together. Here's what we want to happen.

  1. Every time a user visits our site, we'll ask ListStore to load all items from the server.
  2. It will use jQuery's AJAX function to make a request to http://listalous.herokuapp.com/ and get all the data about our list's items.
  3. We will then use our React Components to render all of our items!

Steps

Step 1

First, we need to tell ListStore to call the loadItems function whenever a user visits the page. Open up index.html, and add this line of code to the bottom of the page, before the end of the script tag:

ListStore.loadItems()

the end of index.html should now look like this:

    React.render(<CreationForm />, document.getElementById('form-container') )
    React.render(<List />, document.getElementById('list-container') )
    ListStore.loadItems()
  </script>
</body>

Step 2

Now, we have to write the loadItems function! open up Store.js, and add the following code to the loadItems function. Replace 'YOUR-LIST-NAME-HERE' with the name of the list you created.

loadItems: function() {
  var loadRequest = $.ajax({
    type: 'GET',
    url: "https://listalous.herokuapp.com/lists/YOUR-LIST-NAME-HERE/"
  })
},

Refresh the page, and click over to your browser's network tab. You should see a new request there, that visits our server at https://listalous.herokuapp.com/.

Step 3

Now that we've made the request, we need to update ListStore whenever the request succeeds. Add the following lines of code to the bottom of the LoadItems function.

loadRequest.done(function(dataFromServer) {
  items = dataFromServer.items
  notifyComponents()
})

Now refresh the page. Once the AJAX request succeeds, your site should now display all the items you created last lesson! If not, flag an instructor down to help you debug the problem.

Explanation

Store.js should now look like this.

ListStore = {

  getItems: function() {
    return items
  },

  loadItems: function() {
    var loadRequest = $.ajax({
      type: 'GET',
      url: "https://listalous.herokuapp.com/lists/YOUR-LIST-NAME-HERE/"
    })

    loadRequest.done(function(dataFromServer) {
      items = dataFromServer.items
      notifyComponents()
    })
  },
  addItem: function(itemDescription) {},
  toggleCompleteness: function(itemId) {}

Let's walk through what just happened:

  1. When the user visited the page, we told the ListStore to load items.
  2. The ListStore used jQuery's AJAX function to make a request to our server.
  3. The server responded with all the items associated with our list.
  4. We saved the server's response in the items variable, and notified the components that it was time to re-render themselves.
  5. The components heard the message, and updated! The List component used ListStore's getItems function to get all the items data we had stored in the items variable.

Your web page has made its first successful AJAX request! Now, your page will load your list's items whenever you visit it. Once we host this page on the internet, you will be able to see your list on any computer, tablet, or phone!

Next Step:

Go on to Adding An Item