I was wondering how to use JS in order to pull Data from a SP2013 list convert it into HTML using the following structure below.

For example: The List fields are as follows:

  1. Title
  2. Date
  3. Image
  4. Body
  5. URL

The JS would pull the data above and create the following HTML snippet:

<div class='nb_news_wrap' style='display: none;'> 
<article datetime='**DATE FIELD FROM LIST GOES HERE**'> 
<header>**TITLE FIELD FROM LIST GOES HERE**</header>
<span class='lcnb_author'>**DATE FIELD FROM LIST GOES HERE**</span>
<a href='**URL FIELD FROM LIST GOES HERE**'class='lcnb_inline_link'>Read More</a>

2 Answers 2


I'm using Sharepoint 2013 in office 365. As using lookup will impact the current structure i have. In SPD 2013, is there any way to do data source merging, i can't find it anywhere.

I managed to use camlquery and spservices (GetListItem) in between to get the information from SharePoint list 2

Try this:

Function GetSharePointList1() {
context = SP.ClientContext.get_current();
oList = context.get_web().get_lists().getByTitle('SharePoint List 2');
var camlQuery = new SP.CamlQuery();
items = oList.getItems(camlQuery);

    Function.createDelegate(this, onSuccessSharePointList1),
    Function.createDelegate(this, onFail)
function onSuccessSharePointList1() {

    recNum = items.get_count();

  if(recNum != 0){
     var listItemEnumerator = items.getEnumerator();
     while(listItemEnumerator.moveNext()) {
            var oListItem = listItemEnumerator.get_current();

            operation: "GetListItems",
            async: false,
            listName: "SharePoint List 2",
            CAMLViewFields: "<ViewFields><FieldRef Name='Worklocation'/></ViewFields>",
            CAMLQuery: "<Query><Where><Eq><FieldRef Name='Title'/><Value Type='Text'>" + ReferenceID + 
            completefunc: function (xData, Status) {
              $(xData.responseXML).SPFilterNode("z:row").each(function() {
                Worklocation = ($(this).attr("ows_Worklocation"));


             s = ..... (display all in table format)


You can do something like that:

   var targetListItem;
   var listName="js";
   var itemId=1;
   ExecuteOrDelayUntilScriptLoaded(GetListItem, "sp.js");

   function GetListItem(listName,itemId) {
     var clientContext = new SP.ClientContext(); 
     var targetList = clientContext.get_web().get_lists().getByTitle(listName);
     targetListItem = targetList.getItemById(itemId);
     clientContext.load(targetListItem, 'Title','zDate','Image','Body','URL');
     clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));

   function onQuerySucceeded() {

       var mytitle = targetListItem.get_item('Title');
       var myDate = targetListItem.get_item('zDate');
       var myImage = targetListItem.get_item('Image');
       var myBody = targetListItem.get_item('Body');
       var myURL = targetListItem.get_item('URL');

       return("<div class='nb_news_wrap' style='display: none;'><article datetime='"+myDate+"'><header>"+mytitle+"</header><img src='"+myImage+"'/><section><span class='lcnb_author'>"+myDate+"</span>"+myBody+"</section><a href='"+myURL+"'class='lcnb_inline_link'>Read More</a></article></div>");


   function onQueryFailed(sender, args) {
     alert('Request failed. \nError: ' + args.get_message() + '\nStackTrace: ' + args.get_stackTrace());

You can add script editor and paste this code in and change the name of the fields to the exact names. The code is currently is returning the item with Id 1, but you can adjust that to return whatever you like and the name of the list in this example is js...also change that as well...

Let me know how it goes!!!

  • FYI, no need to +Str+ concatenate with the standard SP String.format function: sharepoint.stackexchange.com/questions/160806/… Commented May 14, 2016 at 9:03
  • This makes sense, and thanks for the input. When implementing this in a script editor and editing the listName etc.. It throws me this error in console: Uncaught TypeError: Cannot read property 'toUpperCase' of undefined
    – ermalsh
    Commented May 15, 2016 at 19:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.