Re: Javascript laddar inte Json-file intermitent [Löst]

C, C++, Pascal, Assembly, Raspberry, Java, Matlab, Python, BASIC, SQL, PHP, etc.
Användarvisningsbild
Oltronix
Inlägg: 408
Blev medlem: 10 december 2011, 21:24:38
Ort: Nynäs

Re: Javascript laddar inte Json-file intermitent [Löst]

Inlägg av Oltronix »

Följande kod laddar en Json-file vid tryck på knapp och det fungerar initialt, men men... När jag ändrar data i mat.json så uppdateras ej html-sidan med ny data när jag trycker på knappen igen. Tom när jag byter namn på Json-filen så får jag inga fel utan koden beter sig som att den gamla filen finns kvar i någon cache eller annat. Det hjälper inte alltid om jag stänger fliken där htmlkoden finns eller laddar om websidan. Koden snurrar på Raspberry Pi (all kod och data finns i samma folder) med Apache-server i ett lokalt nätverk. Browser är Firefox som snurrar på en Umbuntu-kärra. Felet är intermitent som ibland avhjälps med reload av sida eller stänga filken för sida och öppna samma sida igen.

Vad är felet?
Hur avhjälpa?

Htmlkod

Kod: Markera allt

<!DOCTYPE html>
<html>
<head>
   <title>Mat-lista</title>
</head>
<body>
   <header>
      <h1>Matlista</h1>
      <button id="btn"> Fetch matlista</button>
   </header>
   <div id="to-buy"></div>
   <script src="mat.js"></script>
</body>
</html>
Javascriptkode, mat.js

Kod: Markera allt

//https://www.youtube.com/watch?v=rJesac0_Ftw
var  Container = document.getElementById("to-buy");
var btn = document.getElementById("btn");

btn.addEventListener("click", function() {
var ourRequest = new XMLHttpRequest();
ourRequest.open('GET', 'mat.json')
ourRequest.onload = function() {
   var ourData = JSON.parse(ourRequest.responseText);
   renderHTML(ourData);
 };
 ourRequest.send();
});

function renderHTML(data) {
   var htmlString = "";
   for (i=0; i < data.length; i++) {
      if (data[i].Antal  !== 0 && data[i].Mat !== "") {
        htmlString+="<p>"+data[i].Mat + " " + data[i].Antal + "st"+ "</p>";
      }
   }
  Container.insertAdjacentHTML('beforeend', htmlString);
}
Json-file, mat.json

Kod: Markera allt

[
    {
        "Mat": "\u00c4pple",
        "Antal": 7.0
    },
    {
        "Mat": "Mango",
        "Antal": 1.0
    },
    {
        "Mat": "Brysselk\u00e5l",
        "Antal": 0.0
    },
    {
        "Mat": "Blommk\u00e5l",
        "Antal": 2.0
    },
    {
        "Mat": "F\u00e4nk\u00e5l",
        "Antal": 2.0
    },
    {
        "Mat": "R\u00f6dbettor",
        "Antal": 0.0
    },
    {
        "Mat": "Potatis",
        "Antal": 0.0
    },
    {
        "Mat": "L\u00f6k",
        "Antal": 0.0
    },
    {
        "Mat": "Vitl\u00f6k",
        "Antal": 0.0
    },
    {
        "Mat": "",
        "Antal": ""
    },
    {
        "Mat": "Mjuk br\u00f6d",
        "Antal": 2.0
    },
    {
        "Mat": "H\u00e5rt br\u00f6d",
        "Antal": 0.0
    },
    {
        "Mat": "Skorpor",
        "Antal": 0.0
    },
    {
        "Mat": "",
        "Antal": ""
    },
    {
        "Mat": "K\u00f6ttf\u00e4rs",
        "Antal": 0.0
    },
    {
        "Mat": "Fisk",
        "Antal": 0.0
    },
    {
        "Mat": "Fiskblock",
        "Antal": 0.0
    },
    {
        "Mat": "Renskav",
        "Antal": ""
    },
    {
        "Mat": "",
        "Antal": ""
    },
    {
        "Mat": "H-papper",
        "Antal": 0.0
    },
    {
        "Mat": "T-papper",
        "Antal": 0.0
    },
    {
        "Mat": "",
        "Antal": ""
    },
    {
        "Mat": "Mj\u00f6lk",
        "Antal": 3.0
    },
    {
        "Mat": "Yougurt",
        "Antal": 0.0
    },
    {
        "Mat": "",
        "Antal": ""
    },
    {
        "Mat": "Saltgurka",
        "Antal": 0.0
    },
    {
        "Mat": "R\u00f6dbettor",
        "Antal": 0.0
    }
]
Senast redigerad av Oltronix 31 januari 2020, 20:56:51, redigerad totalt 1 gång.
jihe
Inlägg: 2405
Blev medlem: 24 april 2009, 20:16:03

Re: Javascript laddar inte Json-file intermitent

Inlägg av jihe »

Webbläsaren cachar kanske json-sidan? Hur ser headersarna servern skickar ut ut?

För att åtgärda på klientsidan kan du ju göra urlen du hämtar unik, typ mat.json?foo=<timestamp>
Användarvisningsbild
Oltronix
Inlägg: 408
Blev medlem: 10 december 2011, 21:24:38
Ort: Nynäs

Re: Javascript laddar inte Json-file intermitent [Löst]

Inlägg av Oltronix »

När jag inte får uppdatering så händer inget på nätet mellan server och klient. "Felet" kvarstod även efter omboot.

När jag skickar med en timestamp i GET-anropet så funger det som jag vill !!!

Vad är det för skumma mekanismer med med GET-anropet som gör att det fungerar/inte fungerar?

Var lär man sig mer om detta?

Höll på många timmar och slogs med detta och var ganska frusterad.

Tack för supporten :D Jag bukar mig ödmjukt !!!
jihe
Inlägg: 2405
Blev medlem: 24 april 2009, 20:16:03

Re: Javascript laddar inte Json-file intermitent [Löst]

Inlägg av jihe »

Din webbläsare tittar på headern från servern om filens bäst före-datum och lyder detta. Det är för att du inte skall behöva ladda hem oförändrade saker i onödan.

När du ändrar urlen så blir det en "ny" sida, så cachetiden räknas om från noll.

Detta kan du se i med utvecklarverktygen i din webbläsare, tryck ctrl-shift-k och utforska.

Den korrekta lösningen är att du när du skickar ut json-filen också modifierar headern som talar om hur länge den skall leva.
Användarvisningsbild
Oltronix
Inlägg: 408
Blev medlem: 10 december 2011, 21:24:38
Ort: Nynäs

Re: Javascript laddar inte Json-file intermitent [Löst]

Inlägg av Oltronix »

Fint!!
ctrl+shift+k eller "Web developer" var bra, spec Network detta fall. Då såg jag tydligt status 200 resp 304 (Not Modified). Mycket lättare än att köra Wireshark, spec när jag inte är van vid det verktyget. Ett nytt verktyg och ganska lättanvänt i min verktygslåda, "Web developer"
Skriv svar