Get data from Firebase Database with fetch()

1<button @click="loadData">Load Data</button>

 1function loadData() {
 2    fetch(url)
 3    .then(response => {
 4        if(response.ok){
 5            // console.log(response);
 6            return response.json();
 7        }
 8    })
 9    .then(data => {
10        // console.log(data)
11          // data is an Object, transform it into array
12    })
13 
14}

 1<script setup>
 2import { ref, onMounted } from "vue";
 3 
 4const results = ref([]);
 5 
 6function loadData() {
 7    fetch('https://survey-93121-default-rtdb.europe-west1.firebasedatabase.app/survey.json')
 8    .then(response => {
 9        if(response.ok){
10            // console.log(response);
11            return response.json();
12        }
13    })
14    .then(data => {
15        // console.log(data)
16        const tempResults = [];
17        for(const id in data) {
18            tempResults.push({
19                id: id,
20                name: data[id].name,
21                rating: data[id].rating
22            });
23        }
24        // console.log(tempResults)
25        results.value = tempResults;
26    })
27}
28</script>

1<p v-if="results.length > 0" v-for="result in results" :key="result.id" class="my-4">
2  <span class="font-semibold">{{ result.name }}</span> rated experience <span class="text-violet-700 font-semibold">{{ result.rating }}</span>.
3</p>
4 
5<p v-if="results.length === 0)">Please add some data...</p>

1<script setup>
2import { ref, onMounted } from "vue";
3 
4onMounted(() => loadData());

 1<script setup>
 2import { onMounted, ref } from "vue";
 3 
 4const results = ref([]);
 5const err = ref(null);
 6 
 7function loadData() {
 8    fetch('https://survey-93121-default-rtdb.europe-west1.firebasedatabase.app/survey.json')
 9    .then(response => {
10        if(response.ok){
11            // console.log(response);
12            return response.json();
13        } else {
14            throw new Error('Something went wrond!'); 
15        }
16    })
17    .then(data => {
18        // console.log(data)
19        const tempResults = [];
20        for(const id in data) {
21            tempResults.push({
22                id: id,
23                name: data[id].name,
24                rating: data[id].rating
25            });
26        }
27        // console.log(tempResults)
28        results.value = tempResults;
29    })
30      // catch error and set it to err property 
31      .catch(error => {
32        err.value = error.message;
33    })
34}
35 
36onMounted(() => loadExperiences());
37 
38</script>

1<p v-if="err" class="text-sm text-red-500 mt-2">{{ err }}</p>

 1<template>
 2  <BaseCard>
 3    <h1 class="text-xl font-semibold mb-6">User Experiences</h1>
 4    <BaseButton @click="loadData">Load Data</BaseButton>
 5    <p v-if="results.length > 0" v-for="result in results" :key="result.id" class="my-4">
 6      <span class="font-semibold">{{ result.name }}</span> rated experience <span class="text-violet-700 font-semibold">{{ result.rating }}</span>.
 7    </p>
 8    <p v-if="results.length === 0)">Please add some data...</p>
 9    <p v-if="err" class="text-sm text-red-500 mt-2">{{ err }}</p>
10  </BaseCard>
11</template>
12 
13<script setup>
14import { ref, onMounted } from "vue";
15 
16const results = ref([]);
17const err = ref(null);
18 
19function loadData() {
20    fetch('https://survey-93121-default-rtdb.europe-west1.firebasedatabase.app/survey.json')
21    .then(response => {
22        if(response.ok){
23            // console.log(response);
24            return response.json();
25        }
26    })
27    .then(data => {
28        // console.log(data)
29        const tempResults = [];
30        for(const id in data) {
31            tempResults.push({
32                id: id,
33                name: data[id].name,
34                rating: data[id].rating
35            });
36        }
37        // console.log(tempResults)
38        results.value = tempResults;
39    })
40 
41}
42 
43onMounted(() => loadData());
44</script>