无法删除数组中的项目答案

【问题标题】：Cannot remove the item in an array无法删除数组中的项目
【发布时间】：2020-10-05 02:01:29
【问题描述】：

我正在尝试获取 API 及其工作，但是当我尝试使用方法“.pop()”或“.slice(0,4)" 它显示：Uncaught (in promise) TypeError: data.body.data.pop is not a function

这是codesandox上代码的链接https://d8i7m.csb.app/

我正在使用 vue 和 vue-resource 制作

<template>
  <div class="hello">
    <ol>
      <li v-for="blog in blogs" :key="blog.id">{{ blog }}</li>
    </ol>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data() {
    return {
      blogs: [],
    };
  },

  created() {
    this.$http
      .get("https://covidnigeria.herokuapp.com/api")
      .then(function (data) {
        this.blogs = data.body.data;
        console.log(data.body.data);
      });
  },
};
</script>

这是我的作品图片

我想删除第 6 个数组，只显示 1-5

不熟悉在应用程序中使用 API。

【问题讨论】：

我已经发布了同样的问题，但没有答案就关闭了。估计前面的不是很清楚。我试图尽可能地清楚这一点。
你试过console.log(data)吗？似乎没有名为 body 的属性。试试data.states.pop()。
在我看来，您应该在为this.blogs 赋值后尝试console.log(typeof this.blogs);。我相信它不是一个数组。
如果你打算删除'data'中的最后一项'states'，试试这个 - this.blogs.states = this.blogs.states.slice(0, 4);
对不起，这不是一个数组，而是一个 json 对象。 @phil 回答了我的问题。

标签： javascript arrays vue.js

【解决方案1】：

查看从您的 API 返回的实际数据。它不是数组

{
  "data": {
    "totalSamplesTested": "535733",
    "totalConfirmedCases": 59345,
    "totalActiveCases": 7464,
    "discharged": 50768,
    "death": 1113,
    "states": [/* lots of data here */]
  }
}

我建议你按key显示你想要的数据

<ol>
  <li>{{ blogs.totalSamplesTested }}</li>
  <li>{{ blogs.totalConfirmedCases}}</li>
  <li>{{ blogs.totalActiveCases}}</li>
  <li>{{ blogs.discharged}}</li>
  <li>{{ blogs.death}}</li>
</ol>

如果您仍想迭代数据并跳过 states，请创建一个计算属性，返回所有省略 states 的内容并对其进行迭代

<ol>
  <li v-for="stat in stats" :key="stat.key">
    {{ stat.label }}: {{ stat.dataPoint }}
  </li>
</ol>

data: () => ({
  blogs: {} // ? an empty object, not an array
}),
computed: {
  stats: ({ blogs }) => {
    const { states, ...stats } = blogs
    return Object.entries(stats).map(([ key, dataPoint ]) => ({
      key,
      dataPoint,
      label: `${key[0].toUpperCase()}${key.slice(1).replace(/[A-Z]/g, " $&")}`
    }))
  }
}

【讨论】：