Pull Data from SharePoint List using JS and converting it into HTML in the following format?

Question

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>
<img src='**IMAGE URL FIELD FROM LIST GOES HERE**'/>
<section>
<span class='lcnb_author'>**DATE FIELD FROM LIST GOES HERE**</span>
**BODY FIELD FROM LIST GOES HERE**
</section>  
<a href='**URL FIELD FROM LIST GOES HERE**'class='lcnb_inline_link'>Read More</a>
</article>   
</div>

Answer 1

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();
camlQuery.set_viewXml(query);
items = oList.getItems(camlQuery);
context.load(items);

context.executeQueryAsync(
    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();

            $().SPServices({
            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 + 
                                      "</Value></Eq></Where></Query>",
            completefunc: function (xData, Status) {
              $(xData.responseXML).SPFilterNode("z:row").each(function() {
                Worklocation = ($(this).attr("ows_Worklocation"));

                    });
            }
            });

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

          $("#resultTable").append(s);
          i++;
        }
       }

Answer 2

You can do something like that:

<script>
   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());
   }
</script>

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!!!