Javascript data.map 不是函数

Question

Hey i've been working on a full stack app with Vue.Js, NodeJS, ExpressJS and mongoDB and i have a PostService.js class in my frontend that handles my http requests. In this class i'm mapping the response that i'm getting from my api but the problem is that when i try to map the response i'm getting and error.

The error says data.map is not a function

---

So what's the solution so i can map my data and show it in front-end?

PostService.js:

const url = "http://localhost:9000/api/posts/";

class PostService {
  static getPosts() {
    return new Promise(async (resolve, reject) => {
      try {
        const res = await axios.get(url);
        const data = res.data;
        resolve(
          data.map(post => ({
            ...post,
            createdAt: new Date(post.createdAt)
          }))
        );
      } catch (err) {
        reject(err);
      }
    });
  }
}

PostComponent.vue :

  <div class="container">
    <h1>Latest posts</h1>
    <hr />
    <p class="error" v-if="error">{{ error }}</p>
    <div class="posts-container">
      <div
        class="post"
        v-for="(post, index) in posts"
        v-bind:item="post"
        v-bind:index="index"
        v-bind:key="post._id"
      >
        {{`${post.createdAt.getDate()}/${post.createdAt.getMonth()}/${post.createdAt.getFullYear()}`}}
        <p class="text">{{ post.text }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import PostService from "../PostService";

export default {
  name: "PostComponent",
  data() {
    return {
      posts: [],
      error: "",
      text: ""
    };
  },
  async created() {
    try {
      this.posts = await PostService.getPosts();
    } catch (err) {
      this.error = err.message;
    }
  }
};
</script>

<style scoped>
...just styling in here
</style>

So can anyone help me why am i getting that error

Answer 1

From your question, I'm assuming your res value from await axios.get(url) looks like this:

{
     posts: [],
     error: "",
     text: ""
}

If thats the case, it is an object , not an array. Map is an array builtin function ( array.map )

What you want to map is the posts array in the response

data.posts.map(post => ({
            ...post,
            createdAt: new Date(post.createdAt)
          }))