Vue JSON Write & Read

Question

This question is kind of specific, but I've looked and can't find the answer here. I am working with Vue3 and trying to write a JSON and then read it. I'm not 100% sure how it works with this though. This is what I have in my js file:

class Post {
        constructor(title, link, img, rank) {
          this.title = title;
          this.link = link;
          this.img = img;
          this.rank = rank;
        }
      }

      const app = new Vue({
        el: "#app",
        data: {
          search: "",
          postList: [
            new Post(
              "Monke",
              "test.html",
              "head.png",
              "Admin"
            ),

            new Post(
              "Queen",
              "test.html",
              "head.png",
              "Admin"
            ),

            new Post(
              "Bly",
              "test.html",
              "head.png",
              "Admin"
            ),

            new Post(
              "Blqc",
              "test.html",
              "head.png",
              "Admin"
            ),

            new Post(
              "BlqckLight",
              "test.html",
              "head.png",
              "Admin"
            ),

            new Post(
              "BlqckKing",
              "test.html",
              "head.png",
              "Admin"            
            ),

            new Post(
              "BlqckWTF",
              "test.html",
              "head.png",
              "Admin"
            ),

            new Post(
              "BlqckFTW",
              "test1.html",
              "head.png",
              "Admin"
            ),

            new Post(
              "BlqckQueen",
              "test.html",
              "head.png",
              "Admin"
            )
          ]
        },

        computed: {
          filteredList() {
            return this.postList.filter((post) => {
              return post.title
                .toLowerCase()
                .includes(this.search.toLowerCase());
            });
          }
        }
      });
      
    for (let i = 0; i < Post.length; i++) {
        console.log(Post.name[i])
    }

The console.log is trying to fetch all the names but it will return like this

P
o
s
t

I know I need to now get all the names and stats to make a JSON, but making it is challenging to me, I need to return it like this

[
  {
    “name”: “Monke”,
    “link”: “test.html”,
    “img”: “head.png”,
    “rank”: “Admin”
  },
  {
    “name”: “Bly”,
    “link”: “test.html”,
    “img”: “head.png”,
    “rank”: “Admin”
  }
]

Etc. I'm sorry if this has been asked and answered before, but I simply couldn’t find it.

I then am wanting to read the JSON file which I had

  JSON.parse(readFileSync(“players”).toString())

Sorry for the inconvenience if any, but I'm not very good with JSON.

You're calling Post.length and Post.name on the actual Post class, when perhaps you should be accessing it from somewhere else like app.data.postList. — qucchia
– qucchia, Commented Nov 9, 2021 at 14:33
Yes but how would I get the data to a var and or get all the Posts to an object for reading and writing to a json? — Monke
– Monke, Commented Nov 9, 2021 at 14:38
The function JSON.stringify() may be what you're looking for: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… — qucchia
– qucchia, Commented Nov 9, 2021 at 14:40

Thomas · Accepted Answer · 2021-11-09 15:01:04Z

1

You are iterating over your class Post, but you should be iterating over your list of Posts. Then the log statement is outside of the Vue app, so you can't access the list. Then you are naming it title in the class but try to access a property called name.

I am not used to use the options API, but you could try the mounted hook within your app:

class Post {
    constructor(title, link, img, rank) {
        this.title = title;
        this.link = link;
        this.img = img;
        this.rank = rank;
    }
}

const app = new Vue({
    el: '#app',
    data: {
        search: '',
        postList: []
    },
    computed: {
        filteredList() {
            return this.postList.filter((post) => post.title
                .toLowerCase()
                .includes(this.search.toLowerCase());
            });
        }
    },
    mounted() {
        this.postList = JSON.parse(readFileSync('players').toString());
        this.postList.forEach((post) => console.log(post.title));
    }
});

edited Nov 9, 2021 at 15:01

answered Nov 9, 2021 at 14:38

Thomas

7,2905 gold badges37 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Monke Over a year ago

No matter where I put this it always give me errors, Im not sure where you want me to put it besides in the class.

Thomas Over a year ago

@Monke, I updated the answer to show the full (untested) code.

Collectives™ on Stack Overflow

Vue JSON Write & Read

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related