Load content from an object

The previous exercise demonstrated how to load content but it was very basic. This lesson takes things further and demonstrates how to load multiple sets of data from an object on demand.

  1. Download obj.zip, decompress it and move both files, obj.html and obj.js, into your work folder. Open the files side by side in your editor and take a look. obj.html should be identical to the file that you created in the previous lesson, except that it contains a link to obj.js <script src=”obj.js”></script> on line 18.
  2. Now look at obj.js. It contains an object named nmiStaff that has information about five NMI staff members that includes a narrative, their name, and a link to their image.
  3. Accessing information about a given person is done via dot syntax. To understand what that means, add theName.innerHTML = nmiStaff.chris.name; on line 39, save obj.js, and open obj.html in your browser. At this point the name Chris Gerlach should appear. Now add
    theNarrative.innerHTML = nmiStaff.chris.narrative;
    theImage.innerHTML = imgSrcOne + nmiStaff.chris.image + imgSrcTwo;
    save obj.js again and refresh your browser. Chris’s name, narrative, and image should appear.
  4. Now that you know how to make staff members appear by ‘hard coding’ the appropriate steps into your js file, it is time to learn how to load each of them upon demand. This task requires a function. Replace the three lines that loaded data for Chris with the following function.

5. Let’s take a look at that function. As you can see it injects data into the div tag targeted by the theName variable just as we have been doing all along, but is doing so kind of weirdly, right? In particular, what is ‘member’ doing? To answer your question, member is an argument (AKA variable) that allows you to call the function and add in the name that ties to the data of a given staff member when you do so. To see how that works, save obj.js, and add the button below to your html, just after the <body> tag. Save the html file and test it. Tyler’s full name should appear.

In this case, ‘tyler’ in quotes becomes the member variable in the nmistaff function. In case you are wondering about the rest of the function, eval(“nmiStaff.”+member+”.name”); keep in mind that we called data for chris with this statement: nmiStaff.chris.name; and all of this hocus pocus is necessary to give us the same type of statement. When “tyler” is called from the button we end up with a string: “nmiStaff.tyler.name”. The eval command takes away the quotes and allows nmiStaff.tyler.name to lead us to his data. Whew. I hope some of that made sense to you but I don’t know how to explain it better.

6. Copy and paste your button, and change it to call the name of a different staff member. As you can see, it is easy to use a series of buttons to get information about any staff member with an entry in the nmiStaff object.

7. Let’s finish the drill and get the rest of that information. Modify the function to match the image below and add buttons to load the name, narrative and image for each staff member.

Roll Your Own

Now that you have learned how to pull data from an object, it is time to cement that learning by creating and using your OWN object.

  1. Create a new html file and connect it to a new js file.
  2. Create an object very similar to the nmiStaff object in your js file, with five name value pairs, but use your OWN data. In nmiStaff the names were chosen based on actual people’s names, but yours can be about literally anything.
  3. Each name should lead to at least 3 values within the brackets as the example below where tyler is the name.
  4. One of the values should lead to an image.
  5. Set up your HTML page exactly as you did before. Each time you click a button the data for a given name should appear along with an image.
  6. Have fun!
 tyler: {
        narrative: "Tyler was first acquainted ",
        name: "Tyler Mazurek",
        image: "https://nmi.cool/wp-content/uploads/2020/09/SS_Tyler-Mazurek-scaled-1.jpeg"

    }