无法删除数组中的项目

Question

Am trying to fetch an API and its working but when I try to delete the last array with a method " .pop() " or with " .slice(0,4 )" it displays: Uncaught (in promise) TypeError: data.body.data.pop is not a function

This is a link to the code on codesandox https://d8i7m.csb.app/

I'm making using vue and 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>

this is an image of my work

I want to delete the 6th array and only display from 1-5

Am new to using APIs in application.

Answer 1

Look at the actual data coming back from your API. It is not an array

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

I suggest you display the data you want by its key

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

If you still want to iterate the data and skip states , create a computed property that returns everything with states omitted and iterate that

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