how to get data from JSON file in Vue.js?

Question

I have 'modified_data.json' JSON file which has this structure.

{
"data": [
    [
        {
           "account_id": "  "
           "account_name": "   "
        },
        {
           "account_id": "  "
           "account_name": "   "
        },          
        {
           "account_id": "  "
           "account_name": "   "
        },          
        {
           "account_id": "  "
           "account_name": "   "
        }
     ],
     [
        {
           "account_id": "  "
           "account_name": "   "
        },
        {
           "account_id": "  "
           "account_name": "   "
        },
        {
           "account_id": "  "
           "account_name": "   "
        }
     ],
     [
        {
           "account_id": "  "
           "account_name": "   "
        },
        {
           "account_id": "  "
           "account_name": "   "
        },
        {
           "account_id": "  "
           "account_name": "   "
        }
      ]
   ]
}

I want to get first object's account_name from each array...

Does anyone can give me a solution??

Now I'm using Vue.js to display it, I could get each data with python, but Vue.js is not familiar with me yet... Kindly help me :)

Hi Yohan, welcome to StackOverflow! Can you please start by adding what you have tried? I want to get first object's account_name from each array sounds more like a Javascript question though. — Yom T.
– Yom T., Commented Jan 24, 2019 at 4:45

zetawars · Accepted Answer · 2019-01-24 04:41:38Z

8

Well, you will have to add the code that you have written for Vue

If you are in a vue app, you can do something like this

<script>
      import json from './json/data.json'
      export default{
          data(){
              return{
                  myJson: json
              }
          }
      }
</script>

and if you are writting it inside an html page. you can do it in 2 steps.

1st is to add the file link as a script

<script src="../file.json"></script>

then in the vue script section you can assign it to the data object.

var ele = new Vue({
     el : "#YourElement", 
    data : ObjName
});

"ObjName" is a name of the json object in the file.

ObjName :
{
"data": [
    [
        {
           "account_id": "  "
           "account_name": "   "
        }

answered Jan 24, 2019 at 4:41

zetawars

1,0811 gold badge12 silver badges29 bronze badges

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

1 Comment

Yohan Choi Over a year ago

Thanks for the answer :) but I don't have ObjName for my json object..I want to get "account_name" of first object in each array. Is there any solution for it?

tony19 · Accepted Answer · 2022-07-15 23:11:23Z

2

You can use a computed property that would reactively take account_name property of the first object of every array:

const data = {
  "data": [
    [
      {
        "account_id": "11",
        "account_name": "name11"
      },
      {
        "account_id": "12",
        "account_name": "name12"
      },
      {
        "account_id": "13",
        "account_name": "name13"
      },
      {
        "account_id": "14",
        "account_name": "name14"
      }
    ],
    [
      {
        "account_id": "21",
        "account_name": "name21"
      },
      {
        "account_id": "22",
        "account_name": "name22"
      },
      {
        "account_id": "23",
        "account_name": "name23"
      }
    ],
    [
      {
        "account_id": "31",
        "account_name": "name31"
      },
      {
        "account_id": "32",
        "account_name": "name32"
      },
      {
        "account_id": "33",
        "account_name": "name33"
      }
    ]
  ]
}


new Vue({
  el: '#demo',
  data() {
    return {
      data: data.data
    }
  },
  computed: {
    firstAccountNames() {
      return this.data.map(dataSet => dataSet[0].account_name)
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <ul>
    <li v-for="name in firstAccountNames">
      {{ name }}
    </li>
  </ul>
</div>

edited Jul 15, 2022 at 23:11

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jan 24, 2019 at 5:50

antonku

7,7252 gold badges18 silver badges22 bronze badges

2 Comments

Yohan Choi Over a year ago

one more question. If I put my json data into the script, it works..But when I try to read json file(same contents), console says error message always. Firefox : SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data Chrome : Uncaught SyntaxError: Unexpected token m in JSON at position 0 at JSON.parse (<anonymous>) What should I do to load json file successfully?

antonku Over a year ago

@YohanChoi Probably your web app build tool (webpack I guess), automatically converts JSON into a JavaScript object. Try to remove manual parsing (JSON.parse) and simply use the imported data as a JavaScript object.

Yohan Choi · Accepted Answer · 2019-01-28 01:57:49Z

1

I solved it! here is code!

var app = new Vue({
el: '#app',
data: {
    datas: []
},

computed: {
    getAccountNames() {
        return this.datas.map(dataSet => dataSet[0].account_name)
    }
},

mounted() {
    var self = this
    $.getJSON("modified_data.json", function(json_data) {
        self.datas = json_data.data
    })
  }
})

Anyway, another question... what is the difference between "this" and "self" ? "self" is equal to "this" I think but when I just use "this", it has error but "self" works well...anyone can tell me the difference?

answered Jan 28, 2019 at 1:57

Yohan Choi

831 gold badge1 silver badge7 bronze badges

1 Comment

Tor Over a year ago

Regarding this and self - the context of "this" changes within the callback of $.getJSON, and so "self" is just a custom named variable to capture the reference of "this" to be used later, before it's overridden within the callback context.

Collectives™ on Stack Overflow

how to get data from JSON file in Vue.js?

3 Answers 3

1 Comment

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related