select one object from one json file by id vue

Question

Sorry I'm new to vue but I have to create SPA application so I started playing with the code and I've been using external API and axios to match dynamic routes in my .vue components for json data like this:

data () {
  return {
    post: null,
    nextPost: null,
    prevPost: null,
    total: 0,
    endpoint: 'https://jsonplaceholder.typicode.com/posts/'
  }
},
methods: {
  totalPosts (posts) {
    this.total = posts
  },
  getPost (id) {
    console.log('currentid' + id)

    axios(this.endpoint + id)
      .then(response => {
        this.post = response.data

      })
      .catch(error => {
        console.log('-----error-------')
        console.log(error)
      })
  },
  getNextPost (id) {
    if(id === this.total) {
      this.nextPost = null
    } else {
      axios(this.endpoint + (id * 1 + 1))
        .then(response => {
          console.log(response.data.id)
          this.nextPost = response.data
        })
        .catch(error => {
          console.log('-----error-------')
          console.log(error)
        })
      }
    },

Now I realised that my application will have to use multiple local json files where each one wil contain a lot of json objects. Application will have to choose file by dynamic route and then to choose object by id in that file. It can not use any server side language too. So I'm currently lost what would be the best approach here.

Answer 1

this is more of a Javascript question, rather than a Vue question.

when your goal is to select one object from an array of object, .filter() is your friends.

for e.g. https://jsfiddle.net/jacobgoh101/1nv5cesv/3/

if the id you are targeting is 3

axios.get('https://jsonplaceholder.typicode.com/posts/').then(res=>{
  const data = res.data;
    const sampleId = 3;
  const post = data.filter((obj)=>{
    return obj.id === sampleId;
  }).pop();
  console.log(post);
})