title: Read from SharePoint with SPServices
body: <p>I am trying to read from a SharePoint list("Winners") and display it on a page using content editor. This sounds really simple but for some reason I'm having a hard time with this. My code to do this is below:</p>
  
  <pre><code>&lt;style type="text/css"&gt;
    h4{
    color: red
  
  }
  table{
  border: #ccc solid 2px;
  border-radius: 3px;
  
  }
  
  &lt;/style&gt;
  
  &lt;script src="/_layouts/1033/FH/jquery-1.7.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="/_layouts/1033/FH/jquery.SPServices-0.7.1a.js"&gt;
  &lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  $(document).ready(function(){
      GetWinners();
  
  }):
  
  //getWinners Function starts here.
  function GetWinners(){
  
      //Variables to store information.
      var method = "GetListItems";
      var list = "Winners";
      var fieldsToRead =  "&lt;ViewFields&gt;" +
                              "&lt;FieldRef Name='Title' /&gt;" +
                              "&lt;FieldRef Name='Picture' /&gt;" +
                              "&lt;FieldRef Name='Text' /&gt;" +
                          "&lt;/ViewFields&gt;";
  
      var query = "&lt;Query&gt;" +
                      "&lt;Where&gt;" +
                          "&lt;Neq&gt;" +
                              "&lt;FieldRef Name='ID'/&gt;&lt;Value Type='Number'&gt;0&lt;/Value&gt;" + 
                          "&lt;/Neq&gt;" +
                      "&lt;/Where&gt;" +
                      "&lt;OrderBy&gt;" + 
                          "&lt;FieldRef Name='Title'/&gt;" +
                      "&lt;/OrderBy&gt;" +
                  "&lt;/Query&gt;";
  
      //SPServices call where we pass the above variables.
      $().SPServices({
          operation: method,
          async: false,
          listName: list,
          CAMLViewFields: fieldsToRead,
              CAMLQuery: query,
                  completefunc: function (xData, Status){
                       $(xData.responseXML).SPFilterNode("z:row").each(function() { 
                          var name = ($(this).attr("ows_Title"));
                          var pictureUrl = ($(this).attr("ows_Picture"));
                          var caption = ($(this).attr("ows_Text"));
  
                          AddRowToTable(name, pictureUrl, caption);
  
                      });
  
                  }
  
      });
  }//End
  
  //Function to add content on the page starts here.
  function AddRowToTable(name, pictureUrl, caption){
      $("#winnersTable").append("&lt;tr align:'middle'&gt;" +
                                  "&lt;td&gt;&lt;img src='"+ pictureUrl + "'/&gt;&lt;br&gt;&lt;h4&gt;" + name + "&lt;/h4&gt;&lt;br&gt;&lt;p&gt;" + caption + "&lt;/p&gt;&lt;/td&gt;" +
                                 "&lt;/tr&gt;");
  
  }
  
  &lt;/script&gt;
  
  &lt;!-- table where the winners would go --&gt;
  &lt;div&gt;
  &lt;table id="winnersTable"&gt;&lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>It will be a great help if someone could point out what I'm doing wrong. I have all the internal name of fields and list correct, so that's not the issue. Perhaps I'm missing up when I try to reference it from content editor. I hope I explained this right, but please let me know if there is any questions.</p>
  
  <p>Regards,  </p>