CALLING .getPaged() didn’t contains the Publishing Rollup image field value for Next Page Results var pagedItemCollection`; //Global variable to store result set
public render(): void { this.domElement.innerHTML = ` <div id="app-1"> <ul id="lstItems"> <li v-for="news in MyData"><span>{{news.Title}}</span><img v-bind:src="news.PublishingRollupImage" alt=""></li> </ul> </div> <div id="divLoadMore"> <a id="aLoadMore" class="loadmore">load more</a> </div>`; GetDataAsync(); this.setButtonsEventHandlers(); } private GetNextPageResults(): void { if (pagedItemCollection.hasNext) { pagedItemCollection.getNext().then(nextPageResults => { pagedItemCollection = ""; pagedItemCollection = nextPageResults; this.UpdateDOM(); if(nextPageResults.hasNext==false) { $ ("#divLoadMore").hide(); } }); } } private UpdateDOM(): void{ var newHtml = ""; for(var i=0; i<pagedItemCollection.results.length;i++) { newHtml = newHtml + "<li><span>"+pagedItemCollection.results[i].Title+"</span><img src="+pagedItemCollection.results[i].PublishingRollupImage+" alt=''></li>"; } var old_html = $ ("#lstItems").html(); $ ("#lstItems").html(old_html + newHtml); } ```` Async method is here async function GetDataAsync() { try { pagedItemCollection = await GetItemsWithPublishingRollupImage(); new Vue({ el: `#app-1`, data: { MyData:pagedItemCollection.results } }); } catch (e) { console.error(e); } } function GetItemsWithPublishingRollupImage() { return new Promise((resolve, reject) => { const itemsCollector = []; const items = pnp.sp.web.lists.getByTitle("Pages").items.top(2). filter("ContentTypeId eq 'ContentTypeIdGuid'"); // get the initial list of items items.getPaged().then((p1) => { const batch = pnp.sp.web.createBatch(); // now we need to add all the requests to the batch // for each item we need to then make a seperate call to get the FieldValuesAsHtml for (let i = 0; i < p1.results.length; i++) { // use the Item class to build our request for each item, appending FieldValuesAsHtml to url const htmlValues = new Item(items.getById(p1.results[i].Id), "FieldValuesAsHtml"); var regex = /<img.*?src=['"](.*?)['"]/; htmlValues.select("PublishingRollupImage").inBatch(batch).get().then(htmlValue => { // extend our item and push into the result set if(htmlValue.PublishingRollupImage != "" && htmlValue.PublishingRollupImage != null && htmlValue.PublishingRollupImage != undefined) { itemsCollector.push(Util.extend(p1.results[i], { PublishingRollupImage: regex.exec(htmlValue.PublishingRollupImage)[1], })); } }); } //execute the batch batch.execute().then(_ => { // use the behavior that all contained promises resolve first to ensure itemsCollector is populated resolve(p1); }); }) }); }