I have a JSON file with data and I am trying to decode it using typescript/javascript and below is my JSON format:
{
"topics":{
"default":{
"tables":[
{"tbl_id": 1, "tbl_name": "people", "tbl_description": "Desc for people", "icon": "\uf509", "color":"#348888", "variables": [{"tbl_id": 1, "var_id": 2, "IDS_column_name":"Column name here", "var_name": "Variable name here", "data_type": "integer", "meaning": "Variable meaning here", "date_introduced": "12/10/23", "range": "1 to 5", "old_var_name": "Old variable name here", "reference":"reference here", "derived": "yes", "synonyms": [{"syn_id": 1, "synonym": "People synonym"}], "input_values": [{"val_id": 1, "value": "Foo"}], "timeline_of_change":[{"change_id": 1, "change_date": "12/12/30", "comment": "Comment here"}], "dependencies": [{"depend_on": 1}]}], "pos": {"x": 1, "y": 2} },
{"tbl_id": 2, "tbl_name": "encounters", "tbl_description": "Desc for encounters", "icon": "\uf509", "color":"#346888", "variables": [{"tbl_id": 1, "var_id": 2, "IDS_column_name":"Column name here", "var_name": "Variable name here", "data_type": "integer", "meaning": "Variable meaning here", "date_introduced": "12/10/23", "range": "1 to 5", "old_var_name": "Old variable name here", "reference":"reference here", "derived": "yes", "synonyms": [{"syn_id": 1, "synonym": "People synonym"}], "input_values": [{"val_id": 1, "value": "Foo"}], "timeline_of_change":[{"change_id": 1, "change_date": "12/12/30", "comment": "Comment here"}], "dependencies": [{"depend_on": 1}]}], "pos": {"x": 2, "y": 4} },
{"tbl_id": 3, "tbl_name": "medical_prescriptions", "tbl_description": "Desc for medical_prescriptions", "icon": "\uf509", "color":"#346888", "variables": [{"tbl_id": 1, "var_id": 2, "IDS_column_name":"Column name here", "var_name": "Variable name here", "data_type": "integer", "meaning": "Variable meaning here", "date_introduced": "12/10/23", "range": "1 to 5", "old_var_name": "Old variable name here", "reference":"reference here", "derived": "yes", "synonyms": [{"syn_id": 1, "synonym": "People synonym"}], "input_values": [{"val_id": 1, "value": "Foo"}], "timeline_of_change":[{"change_id": 1, "change_date": "12/12/30", "comment": "Comment here"}], "dependencies": [{"depend_on": 1}]}], "pos": {"x": 4, "y": 6} },
{"tbl_id": 4, "tbl_name": "lab_orders", "tbl_description": "Desc for lab_orders", "icon": "\uf509", "color":"#346888", "variables": [{"tbl_id": 1, "var_id": 2, "IDS_column_name":"Column name here", "var_name": "Variable name here", "data_type": "integer", "meaning": "Variable meaning here", "date_introduced": "12/10/23", "range": "1 to 5", "old_var_name": "Old variable name here", "reference":"reference here", "derived": "yes", "synonyms": [{"syn_id": 1, "synonym": "People synonym"}], "input_values": [{"val_id": 1, "value": "Foo"}], "timeline_of_change":[{"change_id": 1, "change_date": "12/12/30", "comment": "Comment here"}], "dependencies": [{"depend_on": 1}]}], "pos": {"x": 4, "y": 6} },
{"tbl_id": 5, "tbl_name": "lab_test_results", "tbl_description": "Desc for lab_test_results", "icon": "\uf509", "color":"#346888", "variables": [{"tbl_id": 1, "var_id": 2, "IDS_column_name":"Column name here", "var_name": "Variable name here", "data_type": "integer", "meaning": "Variable meaning here", "date_introduced": "12/10/23", "range": "1 to 5", "old_var_name": "Old variable name here", "reference":"reference here", "derived": "yes", "synonyms": [{"syn_id": 1, "synonym": "People synonym"}], "input_values": [{"val_id": 1, "value": "Foo"}], "timeline_of_change":[{"change_id": 1, "change_date": "12/12/30", "comment": "Comment here"}], "dependencies": [{"depend_on": 1}]}], "pos": {"x": 6, "y": 8}
}
],
"edges": {
"people": {
"encounters":{}
},
"encounters": {
"medical_prescriptions":{},
"lab_orders": {}
},
"lab_orders":{
"lab_test_results": {}
}
}
}
,
"demographics":{
"tables":[
{"tbl_id": 1, "tbl_name": "people", "tbl_description": "Desc for people", "icon": "\uf509", "color":"#348888", "variables": [{"tbl_id": 1, "var_id": 2, "IDS_column_name":"Column name here", "var_name": "Variable name here", "data_type": "integer", "meaning": "Variable meaning here", "date_introduced": "12/10/23", "range": "1 to 5", "old_var_name": "Old variable name here", "reference":"reference here", "derived": "yes", "synonyms": [{"syn_id": 1, "synonym": "People synonym"}], "input_values": [{"val_id": 1, "value": "Foo"}], "timeline_of_change":[{"change_id": 1, "change_date": "12/12/30", "comment": "Comment here"}], "dependencies": [{"depend_on": 1}]}], "pos": {"x": 1, "y": 2} },
{"tbl_id": 2, "tbl_name": "encounters", "tbl_description": "Desc for encounters", "icon": "\uf509", "color":"#346888", "variables": [{"tbl_id": 1, "var_id": 2, "IDS_column_name":"Column name here", "var_name": "Variable name here", "data_type": "integer", "meaning": "Variable meaning here", "date_introduced": "12/10/23", "range": "1 to 5", "old_var_name": "Old variable name here", "reference":"reference here", "derived": "yes", "synonyms": [{"syn_id": 1, "synonym": "People synonym"}], "input_values": [{"val_id": 1, "value": "Foo"}], "timeline_of_change":[{"change_id": 1, "change_date": "12/12/30", "comment": "Comment here"}], "dependencies": [{"depend_on": 1}]}], "pos": {"x": 2, "y": 4} },
{"tbl_id": 3, "tbl_name": "medical_prescriptions", "tbl_description": "Desc for medical_prescriptions", "icon": "\uf509", "color":"#346888", "variables": [{"tbl_id": 1, "var_id": 2, "IDS_column_name":"Column name here", "var_name": "Variable name here", "data_type": "integer", "meaning": "Variable meaning here", "date_introduced": "12/10/23", "range": "1 to 5", "old_var_name": "Old variable name here", "reference":"reference here", "derived": "yes", "synonyms": [{"syn_id": 1, "synonym": "People synonym"}], "input_values": [{"val_id": 1, "value": "Foo"}], "timeline_of_change":[{"change_id": 1, "change_date": "12/12/30", "comment": "Comment here"}], "dependencies": [{"depend_on": 1}]}], "pos": {"x": 4, "y": 6} },
{"tbl_id": 4, "tbl_name": "lab_orders", "tbl_description": "Desc for lab_orders", "icon": "\uf509", "color":"#346888", "variables": [{"tbl_id": 1, "var_id": 2, "IDS_column_name":"Column name here", "var_name": "Variable name here", "data_type": "integer", "meaning": "Variable meaning here", "date_introduced": "12/10/23", "range": "1 to 5", "old_var_name": "Old variable name here", "reference":"reference here", "derived": "yes", "synonyms": [{"syn_id": 1, "synonym": "People synonym"}], "input_values": [{"val_id": 1, "value": "Foo"}], "timeline_of_change":[{"change_id": 1, "change_date": "12/12/30", "comment": "Comment here"}], "dependencies": [{"depend_on": 1}]}], "pos": {"x": 4, "y": 6} },
{"tbl_id": 5, "tbl_name": "lab_test_results", "tbl_description": "Desc for lab_test_results", "icon": "\uf509", "color":"#346888", "variables": [{"tbl_id": 1, "var_id": 2, "IDS_column_name":"Column name here", "var_name": "Variable name here", "data_type": "integer", "meaning": "Variable meaning here", "date_introduced": "12/10/23", "range": "1 to 5", "old_var_name": "Old variable name here", "reference":"reference here", "derived": "yes", "synonyms": [{"syn_id": 1, "synonym": "People synonym"}], "input_values": [{"val_id": 1, "value": "Foo"}], "timeline_of_change":[{"change_id": 1, "change_date": "12/12/30", "comment": "Comment here"}], "dependencies": [{"depend_on": 1}]}], "pos": {"x": 6, "y": 8}
}
],
"edges": {
"people": {
"encounters":{}
},
"encounters": {
"medical_prescriptions":{},
"lab_orders": {}
},
"lab_orders":{
"lab_test_results": {}
}
}
}
} }
I am trying to go into the topics then tables and so fourth. But before we get to tables from topics we have default and demographics as keys. I tried running a for loop but I am getting an error saying Cannot read properties of undefined (reading 'topics'). Below is how I am getting the data from the JSON file itself:
getBranches() {
return fetch('../dummyData/branchesData.json').then(res => res.json()).then(d => d.topics);
}
As you can see above I am getting the data starting from the topics. Below I am receiving the data in my Vue file and trying to iterate over it:
<script lang="ts">
import { defineComponent, onMounted, ref } from "vue";
import branchesData from "@/composables/testData";
export default defineComponent({
name: "GraphView",
components: {
},
setup() {
const canvasRef = ref()
onMounted(() => {
branchesService.value.getBranches().then(topics => {
branches.value = topics;
//console.log(branches.value);
});
})
const branches = ref();
const branchesService = ref(new branchesData());
console.log(branches.value["topics"]);
for (const branch in branches) {
//Am trying to iterate the JSON here and get the tables and so on
}
return { branches }
},
});
</script>
I can log all the data in the onmounted when I log branches.value and below is what I am getting.
The above picture I can get my data under Proxy then Target. What can I do to get those values from my JSOn file?
