时间戳

首页 > 解决方案 > 无法删除数组中的项目

javascript - 无法删除数组中的项目

问题描述

我正在尝试获取 API 及其工作，但是当我尝试使用方法“ .pop() ”或“ .slice(0,4 )”删除最后一个数组时，它显示：Uncaught (in promise) TypeError: data. body.data.pop 不是函数

这是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 是新手。

标签： javascriptarraysvue.js

解决方案

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

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

我建议你通过它的键显示你想要的数据

<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, " $&")}`
    }))
  }
}

推荐阅读