SharePoint 2013 REST API - Using jQuery Append specific SharePoint list item to specific HTML ID

Question

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.

Answer 1

In your append logic when you select $(".promoContainer") it returns 4 objects. So each iteration it will append to every object. It ends with 16 divs.

You need to update your logic as follow

$.each(data.d.results, function(index, item){
    $(".promoContainer:eq(" + index + ")").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>"

    );
}

Answer 2

I'm assuming you need the elements to be in a div with a class of promoContainer (otherwise you could just remove the three extra divs and would have what you need)? If so, can you move the append method to the parent element and build the promoContainer div element in the append method?

Something like this:

$(".parentClass").append(
"<div class='promoContainer'>"+
          "<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>"+
"<div>"

 );