cant access json object stored in local storage [object Object] in vue.js

Question

I have fieldObj which I need frequently. It comes from database. I want to store it in localStorage.

below is the code I wrote which fetch fieldObj from database if localStorage don't have it.

When I try to access the json data stored in localStorage it just shows

[object Object]

code is treating fieldObj of localStorage as string.

I need to access key values pairs stored in fieldObj.

<script>
export default {
  data() {
    return {
      fields: JSON,
    }
  },
  created() {
    if (!localStorage.getItem('field-obj')) {
      axios
        .get('/api/u/record/', {
          withCredentials: true,
        })
        .then((response) => {
          response.data.forEach((el) => {
            if (el.COLUMN_TYPE == 'int') el.COLUMN_TYPE = 'number'
          })
          const fieldObj = response.data[0].fieldObj[0]
          this.fields = fieldObj
        })
        .then(() => {
          localStorage.setItem('field-obj', this.fields)
        })
    } else {
      console.log(new Object(localStorage.getItem('field-obj')))
      // console.log(localStorage.getItem('field-obj')[0].username)
    }
  },
}
</script>

Try to wrap the thing that you want to display into a JSON.parse(JSON.stringify(yourObject)) to inspect the variable. There is probably an object down there and not a string or alike. — kissu
– kissu, Commented May 5, 2022 at 12:53
do you mean JSON.parse(JSON.stringify(localStorage.getItem('field-obj'))) ? — Het Tarkhala
– Het Tarkhala, Commented May 5, 2022 at 12:59
when it fetch fieldObj from database it gives {case index: 'varchar(14)', next visit: 'date', patient name: 'varchar(30)', prescription: 'varchar(255)'} — Het Tarkhala
– Het Tarkhala, Commented May 5, 2022 at 13:05
Yes for the first question. So if you store an object in your localStorage, you will get an object back. Hence something like localStorage.getItem('field-obj').prescription may be needed. — kissu
– kissu, Commented May 5, 2022 at 13:08
Got it ! changed the way I was storing item in local storage from localStorage.setItem('field-obj',this.fields) to localStorage.setItem('field-obj',JSON.stringify(this.fields)) and accessed it by this.fields = JSON.parse(localStorage.getItem('field-obj')) and it worked completely fine. — Het Tarkhala
– Het Tarkhala, Commented May 5, 2022 at 13:17

kissu · Accepted Answer · 2022-05-05 13:44:16Z

5

Setting it in the localStorage like this

localStorage.setItem('field-obj',JSON.stringify(this.fields))

and accessing it with this fixed the issue

this.fields = JSON.parse(localStorage.getItem('field-obj'))

A more complex example could be found here, using Nuxt.

edited May 5, 2022 at 13:44

answered May 5, 2022 at 13:19

kissu

47.3k16 gold badges94 silver badges196 bronze badges

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

Collectives™ on Stack Overflow

cant access json object stored in local storage [object Object] in vue.js

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related