VUE JS 3 json data not rendering when using v-for

Question

I've been trying to iterate over data inside of a json file and display it in a table. However nothing shows up. I was following a tutorial set by step, and redone it 6 times and it hasn't worked properly.

<div v-for="item in data" :key="item.id">
<p> {{item.SongName}} </p>
</div>
</template>

<script>
import JsonData from '../assets/learning/songs.json'
export default {
  data () {
    return {
      data: JsonData
   }
  }
 }
</script>

nothing shows up when I use {{item.Songname}} but when I use {{Data}} it shows all the data fine.

{
"Songs": [
{"id": 1, "SongName": "ກອດ | Pure - Tany Vannasin", "link": "https://youtu.be/bAzGST-gOsc"},
{"id": 2, "SongName": "ຕື່ນຈາກຝັນ - BAY6IX & LALA", "link": "https://youtu.be/L0YF-qzCyJc"},
{"id": 3, "SongName": "ແພງອ້າຍ - SOPHANA", "link": "https://youtu.be/D3H3ZAFsdF4"}
]
}

Hi - a few questions. Is the opening <template> missing as a typo? Have you checked your browser console to see what it's telling you in terms of errors? I'd be careful with your casing here.. you say {{ Data }} prints, however you mean - 'data' (lower case), which makes me suspect it should be item.songName too. — paddyfields
– paddyfields, Commented Mar 2, 2022 at 15:17
Oh, and you haven't parsed the JSON - which is what the problem will actually be. I'll add an answer. — paddyfields
– paddyfields, Commented Mar 2, 2022 at 15:18
The <template> tag is at the top, the part I just pasted is just the part where I'm having issues with. I've checked the console and there are no errors... — DMantas
– DMantas, Commented Mar 2, 2022 at 15:22

paddyfields · Accepted Answer · 2022-03-02 15:36:45Z

2

You'll need to parse the imported JSON to turn it into a Javascript Object that Vue can understand.

<template>
    <div v-for="item in songs" :key="item.id">
        <p> {{item.SongName}} </p>
    </div>
</template>

<script>
import JsonData from '../assets/learning/songs.json'
export default {
    data() {
        return {
            songs: []
        }
    },
    mounted(){
        const parsedData = JSON.parse(JsonData);
        this.songs = parsedData.Songs
    }
}
</script>

edited Mar 2, 2022 at 15:36

answered Mar 2, 2022 at 15:22

paddyfields

1,5492 gold badges17 silver badges28 bronze badges

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

3 Comments

DMantas Over a year ago

It didn't work, after I edited the code the entire view disappeared and it is all still nothing appears. I've added the json text maybe there is issue there...

paddyfields Over a year ago

Your JSON shows a property of 'Songs' which contains the array you're trying to loop. That's not being handled. I'll update the answer.

DMantas Over a year ago

Thank you for your help! I spent to long trying to fix this, you are hero

Ubeydullah Keleş · Accepted Answer · 2024-02-15 14:15:32Z

I am not sure if my solution would apply to your case as well, but here is what I did when I had the same problem.

Instead of a JSON file, I created a ts (or js for that matter) file and I placed my data object in there like so;

export const countryPhoneCodes = [
{ textKey: 'Türkiye', value: '+90' },
{ textKey: 'USA', value: '+1' },
{ textKey: 'UK', value: '+44' }
// ... add more options as needed  ];

And then, in my Vue file (Vue 3 / Nuxt project), inside the script setup tag, I imported my data object like so;

import { countryPhoneCodes } from '~/constants/countryPhoneCodes';

And finally, I used my data object in my template like so;

<select id="country-phone-code-select" v-model="selected" class="fixed-width-select">
        <option v-for="code in translatedCountryPhoneCodes" :value="code.value" :title="code.text + ' ' + code.value">
        {{ code.text }} {{ code.value }}
        </option>
    </select>

Replace translatedCountryPhoneCodes with countryPhoneCodes, and code.text with code.textKey to understand. I had to do some dynamic translation to achieve the language feature that I needed, that's why you are seeing these variable names.

I hope this helps.

I found this helpful: Vue form input bindings

Collectives™ on Stack Overflow

VUE JS 3 json data not rendering when using v-for

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related