【问题标题】:Javascript: Return sliced elementsJavascript:返回切片元素
【发布时间】:2019-01-25 09:59:31
【问题描述】:

我在我的代码中使用了 .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 是我在数据中添加的一个空数组。

非常感谢!

【问题讨论】:

  • 看来你的getProjects 函数本身应该返回一个Promise,你不能从一个普通函数中的Promise 返回。因为 Promise 是异步的。

标签: javascript arrays button axios slice


【解决方案1】:

我了解,您想实现分页以减少负载。您可以设置跳过和限制并获得所需的数据量。请参考文档中的 skip 和 limit for idea。

 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);
});

【讨论】:

    猜你喜欢
    • 2011-10-12
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-11-29
    • 1970-01-01
    • 2021-08-25
    相关资源
    最近更新 更多