Here's my first question on this platform because I'm feeling a bit overwhelmed. I've been experimenting with firebase and vue.js, attempting to navigate through my key-value database construct.
Below is the JSON data I exported:
{
"city":{
"new york":{
"zipcode":{
"10039":{
"street":{
"W 152nd St":[
"263",
"250",
"21"
]
}
},
"02116":{
"street":{
"W 155nd St":[
"3",
"25",
"21"
]
}
}
}
},
"boston":{
"zipcode":{
"02116":{
"street":{
"Berkeley St":[
"161",
"65",
"13"
]
}
}
}
}
}
}
I was hoping to create a dependent dropdown structure like [city [v]] [zipcode [v]] [street [v]] [number [v]]. Any advice or suggestions would be greatly appreciated.
Thank you in advance for taking the time to help me out!
Edit:
<div v-for="location in test">
<div v-for="(address,city) in location">
<div v-for="(nextplz,plzLabel) in address">
<div v-for="(nextstreet,plz) in nextplz">
<div v-for="(streetInfo,streetLabel) in nextstreet">
<div v-for="(numbers,streetName) in streetInfo">
{{location['.key']}} : {{city}}<br/>
{{plzLabel}} : {{plz}}<br/>
{{streetLabel}} : {{streetName}}<br/>
{{numbers}}<hr/>
</div>
</div>
</div>
</div>
</div>
</div>
Edit-2: Corrected indentations and typos in JSON