The previous example introduced you to the Etherson method. At this point, you have an HTML file and a JavaScript file that pulls data about a list and displays it. Not too bad, but clearly this is not something you would do in a real-world solution. So let’s expand on this code and actually pull some data from the list and display it to the user. If you haven’t already, put some data into your Demo List, as shown in Figure 4-28.
Figure 4-28. The Demo List with a few items populated in it
The items in this list don’t really matter at this point; we just need some data to pull and display. Place as many items as you like; we’re going to grab them all. Now that we have more data in the list, we’ll update the SimpleExample.js file from earlier so that we request the list items rather than data about the list.
Update your code with the following:
$(function () { $.ajax({
url: "/apress/_api/web/lists/GetByTitle('Demo List')/items", type: "GET",
headers: {
"accept": "application/json;odata=verbose"
},
}).success(function (data) { var listItemInfo = ";
$.each(data.d.results, function (key, value) {
listItemInfo += "<strong>Title: </strong>" + value.Title + "
<strong>Description: </strong>" + value.Description + "<br />";
});
$("#divHelloWorld").html(listItemInfo);
});
Chapter 4 ■ Building Custom WeB parts using html and JavasCript
It looks similar to the previous code, but with some key things added. First, the URL in the AJAX call has been updated to include /items at the end:
url: "/apress/_api/web/lists/GetByTitle('Demo List')/items"
We are still calling the same list, but we need to let the REST API know that we want the items from the list this time. By providing /items and no other information, we are telling the API to return all items in the list.
Note
■
unless you are confident that your list will not have much data in it, you should never request all the items in any call for data. You can provide ways to limit the data coming back by providing limitors or a Caml query that will return only the items you are looking for. We’ll dig deeper into these options later in the book.
In the success function of our JavaScript, we will loop through all the data that is returned:
var listItemInfo = ";
$.each(data.d.results, function (key, value) {
listItemInfo += "<strong>Title: </strong>" + value.Title + "
<strong>Description: </strong>" + value.Description + "<br />";
});
We start with a new empty variable called listItemInfo. This variable is used to hold all the HTML that we build as we loop through the results of the API call. Next, we use a built-in jQuery function, each, to loop through the results. By using $.each, we’re saying that for each item in the data.d.results object, perform the following function. You’ll use this function a lot in your custom solutions, as looping through list items is very common.
Like the example where we simply displayed properties and data about the list, we see the familiar data.d object. However, this time we have a new property called results. When we queried the list for its data, all the information we needed was found under the d property; for instance, d.Title. When you request list items, all the data will be found in the results property.
Inside the each function, we set the listItemInfo variable to some HTML grabbing the current list item Title and Description. Using the += syntax, we are setting the variable to the current value, plus the new values. This is a simple way of adding onto the HTML if there is any from the previous loop. After the loop is complete, we set the HTML to the Hello World DIV:
$("#divHelloWorld").html(listItemInfo);
Figure 4-29 shows the complete file in Visual Studio.
Chapter 4 ■ Building Custom WeB parts using html and JavasCript
Save the file with the updated code. Before uploading it to the document library, let’s quickly change the title of the CEWP so that this example is slightly more real world. Navigate back to the page where your web part is placed and put it into edit mode. Expand the Appearance accordion and update the Title property, as shown in Figure 4-30.
Figure 4-29. The updated SimpleExample.js file in Visual Studio
Figure 4-30. Updating the title of the Content Editor Web Part
Click OK, and then save the page. Upload your updated SimpleExample.js file to the Simple Example folder in the Webparts document library. You will be prompted with a dialog asking if you would like to replace the current document; click OK. The beauty of the Etherson method is still in effect; because you have turned on versioning in the document library, you can replace files without any stress. If you make a mistake, you can restore the previous version! Navigate back to your page and you will see the updated code grabbing list items and displaying them, as shown in Figure 4-31.
Chapter 4 ■ Building Custom WeB parts using html and JavasCript
Combined with the updated title, this CEWP now resembles more of a real-world solution! Of course, all we’ve really done here is re-create an out-of-the-box List View Web Part, but it should have shown how easy it is to begin working with SharePoint data using HTML and JavaScript. Next, let’s continue to look at some of the benefits of the Etherson method.