​Disp​laying list information with SPServices

SPServices is a client-side jQuery library that you can use to read and write data to SharePoint lists with javascript. We are using version 0.6.2 of the SPServices library. Both the SPServices and jQuery (1.6.4) libraries are included in the master page, you don't need to add them again to your custom code.​

Let's say you have the following list in your site, it has two columns called "Fruit" and "Color" containing the names of fruit and their corresponding colors:​​

We can read the list and write its contents to a list using the following javascript code:


$().SPServices({
  operation: "GetListItems",
  async: false,
  listName: "Fruit",
  CAMLViewFields: "<ViewFields><FieldRef Name='Fruit' /><FieldRef Name='Color' /></ViewFields>",
  completefunc: function (xData, Status) {
    $(xData.responseXML).find("[nodeName='z:row']").each(function() {
      var liHtml = "<li>" + $(this).attr("ows_Fruit") + ", " + $(this).attr("ows_Color") + "</li>";
      $("#fruitlist").append(liHtml);
    });
  }
});

This is what we get when we run the code:

    ​​Tutorials

    The ribbon and site actions menu
    View All Site Content
    Creating a new page
    How to create a folder inside of a library
    Creating a new page in a subfolder of the Pages library
    Check-out and check-in
    Page layouts
    Web parts
    Lists
    Libraries
    Moving pages and files into folders or different libraries
    Basic text editing
    Applying pre-defined styles
    Create and edit links
    Upload and add images to your page
    Image Options
    Image File Size
    How to edit the footer
    How to edit the site navigation
    How to edit your faculty or staff list page
    How to add tabs
    Easy Panels
    Create a rotating banner
    Create a random banner
    Calendars
    Link to custom code with the content editor web part
    Site CSS: customStyles.css
    Embedded Content (How to add scripts to every page in your site)
    Social Media Icons
    How to Embed a YouTube Video
    XSL styling of list information
    Displaying list information with SPServices