Jak wczytać JSON z URL

Jak w VUE wczytać json z serwera, a nie z zasobów ?

Akurat szukałem jakiegoś prostego narzędzia do wizualizacji danych JSON z iperf3 ( narzędzie do monitorowania szybkości łącza)
Znalazłem https://github.com/DCsunset/vue-iperf3-chart

dodałem moj plik data_2022.json .
poprawiłem w kodzie

import jsonData from "./data_2022.json";  

pomyślałem sobie "Jaka piękna składnia , wystarczy wpisać zmienna i adres i to wszystko" :D

zbudowałem i wrzuciłem na docelowy serwer i o dziwo wyświtliłą sie zawartość data_2022.json choć pliku nie było.
po krótkim poszukiwaniu okazało się żę data_2022.json trafiły do kodu JS jako zasoby

A zapis

import jsonData from "./data_2022.json";  

nie oznacza wczytania pliku z serwera tylko jest istotny na etapie projektu

jak to poprawić aby wczytać dane z serwera do zmiennej ?
https://codesandbox.io/s/proud-paper-2x595k?file=/src/App.vue:925-933

<script>
import jsonData from "./data_2022.json";
import Chart from "./components/Chart.vue";

console.log("BEGIN");

let data = "";
console.log("before fetch");
fetch(
  "https://raw.githubusercontent.com/mariuszmaximus/vue-iperf3-chart/master/src/data.json"
)
  .then(function (response) {
    return response.json();
  })
  .then(function (myJson) {
    data = myJson;
    console.log(data);
    console.log("end fetch.");
  });
console.log(data);
console.log("after fetch");

/// display jsonData & jsonData_2022
console.log(jsonData);
//console.log(jsonData_2022);

export default {
  name: "app",
  components: {
    Chart,
  },
  data() {
    return {
      jsonData,
      labels: ["Label 1", "Label 2"],
      options: {
        maintainAspectRatio: false,
      },
    };
  },
};
</script>

Adamek Adam napisał(a):

Jak w VUE wczytać json z serwera, a nie z zasobów ?

Nie do końca rozumie pytanie. Przecież sam masz w kodzie

fetch(
  "https://raw.githubusercontent.com/mariuszmaximus/vue-iperf3-chart/master/src/data.json"
)

nie działa ci to? Nie pobiera jsona?

pobiera ale trochę za późno , dodałem sobie w kilku miejscach " console.log" i plik jest pobrany po narysowanie wszystkiego

[20] console.log(data);  // tutaj jest  pusto 
[21] console.log("after fetch"); 

potem jest uruchomiona funkcja "render" chart.vue

a dopiero potem jest

[17]    console.log(data);
[18]    console.log("end fetch.");

Adamek Adam napisał(a):

pobiera ale trochę za późno , dodałem sobie w kilku miejscach " console.log" i plik jest pobrany po narysowanie wszystkiego

Tak, bo pobieranie z serwera jest asynchroniczne. Dlatego kod który ma używać pobranego jsona musi być umieszczony po linii console.log("end fetch."); wewnątrz then

Dawno nie pisałem nic w Vue, więc mogą pojawić się literówki :(

Jeśli dane mogą pojawić się z drobnym sekundowym opóźnieniem to spróbowałbym pobrać tego JSONa w hooku mounted i wyświetlić odpowiedni fragment po pobraniu danych przez v-if

<template>
  <div style="height: 95vh" v-if="jsonData !== null">
    <chart
      :data="jsonData"
      :labels="labels"
      :options="options"
      :fillAlpha="0.3"
    />
  </div>
</template>

<script>
import Chart from "./components/Chart.vue";

export default {
  name: "app",

  components: {
    Chart,
  },

  data() {
    return {
      jsonData: null,
      labels: ["Label 1", "Label 2"],
      options: {
        maintainAspectRatio: false,
      },
    };
  },

  mounted() {
    fetch( "https://raw.githubusercontent.com/mariuszmaximus/vue-iperf3-chart/master/src/data.json")
      .then((response) => {
        return response.json();
      })
      .then((myJson) => {
        // TUTAJ MUSIALEM ZASTOSOWAĆ SKŁADNIE ARROW FUCTION ŻEBY METODA MIAŁA DOSTĘP DO THIS KOMPONENTU
        this.jsonData = myJson;
      });
  }
};
</script>

https://vuejs.org/guide/essentials/conditional.html
https://vuejs.org/guide/essentials/lifecycle.html

EDIT:

Dodałem jeszcze wyświetlenie komponentu Chart, bo w poprzedniej wersji tego brakowało.