Cannot read property 'map' of undefined in Express, VueJS

Question

i'm building a fullstack app with Express, VueJS and mongoose and it's basically a news feed app. Before two days i had another error but you guys helped me fix it but now i have another one and basically its kinda the same. I have my backend which is handling all the HTTP request and i'm rendering the data (the posts in this case) in the frontend. My main page loads all the posts successfully but i have another page called economy which shows only the posts which are in the economy category but when i try to render the data the same way i did for all the posts it says 'Cannot read property 'map' of undefined'.

I will provide you with the code so you don't get confused

ekonomi.js class:

const express = require("express");
const router = express.Router();

const Post = require("../../models/post");

router.get("/", (req, res, next) => {
  Post.find()
    .where("category")
    .equals("5e0295317e7b5c07d8f359a4")
    .select("_id name content category")
    .exec()
    .then(doc => {
      console.log(doc);
      res.status(200).json({
        count: doc.length,
        ekonomiPosts: doc
      });
    })
    .catch(err => {
      console.log(err);
      res.status(500).json({
        error: err
      });
    });
});

module.exports = router;

EkonomiService.js class which is in the frontend and has the getEconomyPosts() method :

const url = "http://localhost:9000/ekonomi/";

class EkonomiService {
  static getEconomyPosts() {
    return new Promise(async (resolve, reject) => {
      try {
        const res = await axios.get(url);
        const data = res.data;
        resolve(
          data.posts.map(post => ({
            ...post
          }))
        );
      } catch (err) {
        reject(err);
      }
    });
  }
}

export default EkonomiService;

EkonomiComponent.vue class

  <div class="container">
    <h1 class="introTitle">Ekonomi</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"
      >
        <img :src="post.postImage" class="postImage" />
        <p class="category">{{ post.category.name }}</p>
        <p class="title">{{ post.name }}</p>
        <p class="content">{{ post.content }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import EkonomiService from "../services/EkonomiService";

export default {
  name: "EkonomiComponent",
  data() {
    return {
      posts: [],
      error: "",
      text: ""
    };
  },
  async created() {
    try {
      this.posts = await EkonomiService.getEconomyPosts();
    } catch (err) {
      this.error = err.message;
    }
  }
};

When i try and fetch the data from the url http://localhost:9000/posts/ just like i did in my main page which returns all the posts it doesn't throw any errors, so i don't exactly know where the problem is.

I would appreciate if you could help me, thanks.

Answer 1

Check your EkonomiService.js class. Try this code:

result = new Promise((resolve, reject) => {
  axios.get(url)
    .then((result) => {
      const res = result.data.map((product) => {
        return {...product};
      })
      resolve(res);
    }).catch((error) => {
      if(typeof(error) == 'object'){
        alert(error)
      }
      reject(error.data);
    });
});