0

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.

2 Answers 2

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

    );
}
1
  • That's it, just was i was looking for. I think i knew i needed to put the index from the array in there somewhere, but i just couldn't think where. Thanks for the solution :-)
    – Ian
    Jun 19, 2017 at 17:45
1

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

 );
1
  • i did think about doing it this way, but i didn't want the 4 items in the same promoContainer. I needed them to be separate for how the page is laid out. Thanks for the suggestion though :-)
    – Ian
    Jun 19, 2017 at 17:47

Your Answer

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

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