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 :)
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": " "
}
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>
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?
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With