我在我的代码中使用了.slice()函数来切片从API请求(.get)的响应得到的10个元素的数组,这允许我显示10个中的9个。
但是,当我点击一个按钮时,我想返回第10个元素。
例如,如果API请求总共包含19个元素,并且我将它们切换为(0,9),那么在单击按钮后,它应该将第10个元素添加到下一个9,依此类推。
以下是我使用的Javascript代码:
getProjects: function() {
this.loading = true;
let url = this.craftURL();
axios.get(url, {
headers: {
Accept: "application/json"
}
}).then(response => {
this.loading = false;
console.log("Response", response.data)
if (response.data.projects) {
response.data.projects.project.slice(0, 9).forEach(project => {
this.projects.push(this.parseProject(project));
});
} else if (response.data.search.response) {
if (response.data.search.response.numberFound == 0) {
this.noProjects = true;
return;
}
response.data.search.response.projects.project.slice(0, 9).forEach(project => {
this.projects.push(this.parseProject(project));
});
if (this.projects.length == response.data.search.response.numberFound) {
this.hideButton = true;
return;
} else {
this.hideButton = false;
return;
}
}
}).catch(error => {
console.log(error);
});
},
this.projects是我在数据中添加的空数组。
非常感谢!
我明白,你想实现分页来减少负载。您可以设置跳过和限制并获得所需的数据量。请参阅文档以获取跳过和限制的想法。
loadMore() {
this.data = {
user:this.username,
skip: this.s+=1,
limit: this.l+=1
}
this.service.getabcd(data).subscribe(x=>{
this.project=x;
}
在后端你设置限制并跳过这样的
router.post('/abcs/', async (req, res) => {
const ab= await XYZ.find({ username: req.body['user']
}).skip(req.body.skip).limit(req.body.limit);
res.json(ab);
});