Adding and reading json data stored in vuex

Question

I have a vuex store and i am adding some josn data and this is the format.

[
    {
        "id":1,
        "firstname": "toto",
        "lastname": "titi"
    },
    {   "id":2,
        "firstname": "one",
        "lastname": "two"
    }
]

I am adding the data on an on click action and this is the action method

addLink: function() {
var dt = '[{"id":1,"firstname":"xx","lastname": "yy"},{"id":2,"firstname": "one","lastname": "two"}]';
  this.ADD_LINK(dt)
  this.newLink = '';
},

The data is getting added to the store and i can access it like this

computed: {
    users(){
    return this.countLinks;
    }
  }

I can display the data this way {{users}} and this is getting displayed. This is because i clicked twice and added the json twice.

[ "[{\"id\":1,\"firstname\":\"xx\",\"lastname\": \"yy\"},{\"id\":2,\"firstname\": \"one\",\"lastname\": \"two\"}]", "[{\"id\":1,\"firstname\":\"xx\",\"lastname\": \"yy\"},{\"id\":2,\"firstname\": \"one\",\"lastname\": \"two\"}]" ]

However, when i try to use v-for

<ul id="users">
  <li v-for="user in users" :key="user.id">
    {{ users.firstname}}
  </li>
</ul>

i cannot display any data and i have no error. How can i display the data saved in vuex?.

Majed Badawi · Accepted Answer · 2021-04-05 10:43:21Z

1

You can create a computed property that returns the objects in one list parsed as JSON:

new Vue({
  el:"#app",
  data: () => ({
    users: [ "[{\"id\":1,\"firstname\":\"xx\",\"lastname\": \"yy\"},{\"id\":2,\"firstname\": \"one\",\"lastname\": \"two\"}]", "[{\"id\":1,\"firstname\":\"xx\",\"lastname\": \"yy\"},{\"id\":2,\"firstname\": \"one\",\"lastname\": \"two\"}]" ]
  }),
  computed: {
    usersList: function() {
       return this.users.flatMap(userList => JSON.parse(userList));
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <ul id="users">
    <li v-for="(user, index) in usersList" :key="index">
      {{ user.firstname}}
    </li>
  </ul>
</div>

Note: Since ids are not unique in your example, you can use an index in v-for as the key. Also, to show the first name, you need to use the user object.

Another solution: Parse dt in the store and use Array#concat to add the elements as objects to the initial list:

let countLinks = [
  { "id":1,  "firstname": "toto", "lastname": "titi" },
  { "id":2, "firstname": "one", "lastname": "two" }
];
function ADD_LINK(dt) {
  countLinks = countLinks.concat(JSON.parse(dt));
}

const dt = '[{"id":1,"firstname":"xx","lastname": "yy"},{"id":2,"firstname": "one","lastname": "two"}]';
ADD_LINK(dt);

console.log(countLinks);

edited Apr 5, 2021 at 10:43

answered Apr 5, 2021 at 10:12

Majed Badawi

28.5k4 gold badges30 silver badges56 bronze badges

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

7 Comments

Gandalf Over a year ago

My initial data exists in a vuex store, thus it must come from a getter method.

Majed Badawi Over a year ago

@Gandalf yes, of course, this is just for the sake of the demo. Instead of getting the users from data, you can use a getter

Majed Badawi Over a year ago

@Gandalf I updated the answer with another possible solution given your example

Gandalf Over a year ago

This gives this error when using it on my domain VM3767:1 Uncaught (in promise) SyntaxError: Unexpected token h in JSON at position 0

Majed Badawi Over a year ago

@Gandalf make sure it's a JSON STRING you're parsing

|

Hello World · Accepted Answer · 2021-04-05 10:15:56Z

0

you have to store the data as is, rather than converting into string

addLink: function() {
  var dt = [
    {
      "id":1,
      "firstname": "xx",
      "lastname": "yy"
    },
    {
      "id":2,
      "firstname": "one",
      "lastname": "two"
    }
  ];

  // remove the single quote from the above array

  this.ADD_LINK(dt)
  this.newLink = '';
},

In case you are getting the var dt from external source then you should consider converting into valid js json format using this:

addLink: function() {
var dt = '[{"id":1,"firstname":"xx","lastname": "yy"},{"id":2,"firstname": "one","lastname": "two"}]';

// parse it to json format
var parsedDt = JSON.parse(dt);

  // add the `parsedDt`
  this.ADD_LINK(parsedDt)
  this.newLink = '';
},

edited Apr 5, 2021 at 10:15

answered Apr 5, 2021 at 10:09

Hello World

2,9277 gold badges33 silver badges69 bronze badges

2 Comments

Gandalf Over a year ago

This does not not display any data in <li v-for="user in users" :key="user.id"> {{ user.firstname }}</li>

Hello World Over a year ago

Try console log the this.countLinks inside the computed to see what actually the data is.

Collectives™ on Stack Overflow

Adding and reading json data stored in vuex

2 Answers 2

7 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related