Show the contents of a JSON file using Vue

Question

Show the contents of a JSON file using Vue

I have a JSON file containing some data that needs to be fetched and displayed in a component.

In the actions of my Vuex store, I've implemented:

async getTodos (context) {
  const todos = []

  const response = await fetch('../../data/todos.json')
  const responseData = await response.json()

  todos.push(responseData)

  context.commit('getTodos', todos)
}

Mutations:

getTodos (state, payload) {
  state.todos = payload
}

And the state looks like this:

state () {
  return {
    todos: []
  }
}

Now, how can I access these todos from the state and display them when the Homepage is mounted?

An example of the JSON file content:

[
  {
    "id": "1",
    "title": "1st todo",
    "description": "First task",
    "dueTo": "2021-10-03"
  },
  {
    "id": "2",
    "title": "2nd todo",
    "description": "Second task",
    "dueTo": "2021-10-02"
  }
]

javascript json vue.js vuejs2 vuex

Answer 1

Answer №1

If you want to access state in your components, you can utilize mapState method.

<template>
   <div>
      <div>{{todos}}</div>
   </div>
</template>
<script>
import { mapState } from 'vuex';
export default {
   computed: {
      ...mapState(["todos"])
   }
}
</script>

Answer 2

If you want to access state in your components, you can utilize mapState method.

<template>
   <div>
      <div>{{todos}}</div>
   </div>
</template>
<script>
import { mapState } from 'vuex';
export default {
   computed: {
      ...mapState(["todos"])
   }
}
</script>

Answer 3

Answer №2

If you want to retrieve all todos, you can create a getter function like this:

getAllTodos: (state) => state.todos

After that, you need to map the getters in the template :

import { mapGetters } from 'vuex';
computed: {
  ...mapGetters([ 'getAllTodos' ]),
},

<template>
  <ul>
    <li v-for="(todo, i) in getAllTodos" :key="i">{{todo}}</li>
  </div>
</template>

Answer 4

If you want to retrieve all todos, you can create a getter function like this:

getAllTodos: (state) => state.todos

After that, you need to map the getters in the template :

import { mapGetters } from 'vuex';
computed: {
  ...mapGetters([ 'getAllTodos' ]),
},

<template>
  <ul>
    <li v-for="(todo, i) in getAllTodos" :key="i">{{todo}}</li>
  </div>
</template>

Show the contents of a JSON file using Vue

Answer №1

Answer №2

Similar questions

Using the class method to handle jQuery events alters the context

What is the best way to prevent jest.mock from being hoisted and only use it in a single jest unit test?

Using pdfkit to create a PDF and then returning it as a base64 string from a function

Having trouble generating an HTML table from JSON data using JavaScript

What are effective ways to eliminate cross-origin request restrictions in Chrome?

What is the best way to interpret a JSON with nested structure?

Load data from a JSON flat file and dynamically populate new <li> elements with it

Clear the cache of a query in React Query without having to fetch it again

Utilizing Firebase push notifications with multiple google-service.json files within a single Android Studio project

Tips on searching for an entry in a database with TypeScript union types when the type is either a string or an array of strings

Implementation of the I18next library

What is the method to retrieve the base host in AngularJS?

Creating an AJAX request in Knockout.js

When clicked, you will be redirected to the details page

JavaScript for switching between grid layouts

What is the significance of utilizing `.value` within a template when working with a function that produces a computed ref?

Maintain consistent spacing after receiving a value

What could be causing the second image to not drop in the proper position in an HTML and JavaScript environment?

Splitting up JavaScript and HTML within a WordPress environment

Tips for correctly retrieving the current state from a pinia store to use as an argument for an asynchronous function