I'm scratching my head with this and getting nowhere fast. It's probably something really simple that I'm missing.
I'm using the SharePoint 2013 REST API to request the top 4 list items that match my query and want to append their content into a HTML page with jQuery. My particular issue is I have 4 div's on a page and only want 1 list item per div.
EG. DIV 1 - list item 1, DIV 2 - list item 2, DIV 3 - List Item 3, DIV 4 - List Item 4.
Then, when another item that matches my query is pulled, the items shuffle down by one, with the 5th item no longer being visible etc...
I can currently only manage to append each of the 4 list items into each div. So instead of having 4 items showing, I have 16.
I'm hoping to get this done in one REST pull, ideally, i don't want to create a pull per item.
I'm using bootstrap with nested columns/rows etc, however, this is dumbed down HTML (all my rows / columns are set up correctly.
HTML
<div class="promoContainer"><!--List Item 1 Should Go Here--></div>
<div class="promoContainer"><!--List Item 2 Should Go Here--></div>
<div class="promoContainer"><!--List Item 3 Should Go Here--></div>
<div class="promoContainer"><!--List Item 4 Should Go Here--></div>
JS
$.ajax({
url: "http://URL HERE/_api/lists/getbytitle('StaticPromoLinks')/items?$top=4&$orderby=Created desc",
type: "GET",
headers: {
"accept": "application/json;odata=verbose",
"Access-Control-Allow-Origin": "*"
},
success: function(data){
$.each(data.d.results, function(index, item){
$(".promoContainer").append(
"<a href='"+item.ContentURL.Url+"'>"+
"<div class='staticContainer'>"+
"<img src='"+item.ImageURL.Url+"' class='img-responsive staticImage' alt='...'/>"+
"<div class='staticCaption'>"+
"<p>"+item.Title+"</p>"+
"</div>"+
"</div>"+
"</a>"
);
console.log(data);
}
},
error: function(error){
//alert(JSON.stringify(error));
console.log("error");
console.log(data);
}
});
If someone could give me a helping hand I would appreciate it greatly.