Does it support append items from ajax call result? If yes how i suppose to fix the error

[yuhkeonggoh]

ig.on("requestAppend", (e) => { const nextGroupKey = +(e.groupKey || 0) + 1; ig.append(getItems(nextGroupKey), nextGroupKey); });

//function to get ajax data for append
function getItems(nextGroupKey) {
const nextItems = [];
$.ajax({
type: "GET",
url: route,
cache: false,
data: {page : nextGroupKey},
success: function (result) {
var data;
if (typeof(result) === 'string') {
data = JSON.parse(result);
} else {
data = result;
}
for (let i = 0; i < data['posts'].length; ++i) {
nextItems.push(<div class="item"></div>);
}
return nextItems;
},
failed: function (result) {
}
});
}

//error
Uncaught TypeError: Cannot read properties of undefined (reading 'map') at Bt (utils.ts:341) at e.insert (InfiniteGrid.ts:340) at e.append (InfiniteGrid.ts:306) at (index):1630 at infinitegrid.min.js:9 at Array.forEach (<anonymous>) at e.trigger (infinitegrid.min.js:9) at e._onRequestInsert (InfiniteGrid.ts:775) at u._onRequestAppend (InfiniteGrid.ts:752) at infinitegrid.min.js:9

[daybrush]

@yuhkeonggoh

You can use wait and ready and append at success timing.

ig.on("requestAppend", (e) => {
    e.wait();
    const nextGroupKey = +(e.groupKey || 0) + 1;
$.ajax({
type: "GET",
url: route,
cache: false,
data: {page : nextGroupKey},
success: function (result) {
var data;
if (typeof(result) === 'string') {
data = JSON.parse(result);
} else {
data = result;
}
for (let i = 0; i < data['posts'].length; ++i) {
nextItems.push(<div class="item"></div>);
}
    e.ready();
    ig.append(getItems(nextGroupKey), nextGroupKey); });
},
});

[yuhkeonggoh]

Thanks @daybrush