Dotaz: jak načíst pole do JS

[Kolejdoucí]

Dobrý večer, můžu v html stránce vybrat pomocí inputu soubor a načíst ho? V souboru je pouze pole, které potřebuji načíst do JS.

Zkoušel jsem bez výsledku tohle:

<body>
<input id="arrayfile" type="file" />
<button onclick="loader()">loader</button>
</body>

function loader(){
console.log(document.getElementById("arrayfile").value);
}

Odpovědi

[debian+]

Dobrý večer, můžu v html stránce vybrat pomocí inputu soubor a načíst ho?

Priamo nie.

Hm, a poslat na server a nasledne si to stiahnut?

[Kolejdoucí]

Nevěřím, obrázek načíst jde.

[debain]

Debi(l)ana+ neposlouchej, to je místní šašek bezhlavě spamující poradnu. Chceš asi FileReader a nad tím JSON.parse().

Hele.

[Kolejdoucí]

Děkuji, obsah souboru je načten a vložen mezi značky <script> </script> Jenže jak to udělat aby to JS viděl? Aby s tím mohl pracovat. V DOMu vidím, že se to tam vložilo.

[debian]

Něco takového, hele.

[Kolejdoucí]

Ta živá ukázka mi hází chybu

Uncaught SyntaxError: Unexpected token A in JSON at position 0
    at JSON.parse (<anonymous>)
    at FileReader.reader.onload ((index):50)
reader.onload @ (index):50
load (async)
loadJson @ (index):48
onchange @ (index):42

[debian]

Protože tam předpokládám cpeš nevalidní json

[debian]

Resp. odhaduji že tam necpeš žádný json, jestli je to tvoje rozhodnutí, tak si musíš udělat vlastní parser hodnot z promenne co se ted jmenuje json_txt. Jestli mas ale moznost vyberu dat, tak json je snazsi.

[👻]

ukaž jak jako vypadá texťák co tam strkáš

[Kolejdoucí]

Tady je, v souboru jsou dvě pole, nebo asi spíš tam jsou dvě pole polí, nevím.

pole1=[
{a:1,b:5,c:"12.01.2020",d:"Lorem ipsum dolor sit amet"},
{a:2,b:7,c:"12.01.2020",d:"Nunc egestas a nulla nibh"},
{a:3,b:8,c:"12.01.2020",d:"Pretium faucibus tinbunt tinbunt Nulla"},
{a:4,b:1,c:"12.01.2020",d:"Nunc metus pulvinar vitae non"},
];

pole2=[
{a:1,b:"Lorem",c:0},
{a:2,b:"Egestas",c:1},
{a:3,b:"Faucibus",c:1},
{a:4,b:"Tinbunt",c:1},
];

[👻]

to je formát pole v javascriptu to neni validní json a sou to dvě pole najednou. pokuď si mužeš vybírat formát tamtoho souboru tak jako určitě šahej po json. pokud ne tak asi bude potřeba namastit vlastní parser :'( :'( nóóó a jít cestou nějakýho jsinjectu asi neni uplně supr nápad ;D

v js převedeš pole na json takhlen

var jsonString = JSON.stringify(pole1);

by mělo vypadat takle nějak

[{"a":1,"b":5,"c":"12.01.2020","d":"Lorem ipsum dolor sit amet"},
{"a":2,"b":7,"c":"12.01.2020","d":"Nunc egestas a nulla nibh"},
{"a":3,"b":8,"c":"12.01.2020","d":"Pretium faucibus tinbunt tinbunt Nulla"},
{"a":4,"b":1,"c":"12.01.2020","d":"Nunc metus pulvinar vitae non"}]

takhle formátovanej texťák by dotoho jako už mělo jít strčit ;D

[Kolejdoucí]

Díky! Tohle funguje, ale co když je v tom souboru těch polí víc a navíc má každé pole jinou strukturu?

a tohle

var jsonString = JSON.stringify(pole1);

jde udělat opačně?

[Kolejdoucí]

Nešlo by to třeba spojit?

[
pole1=[{a:1,b:5,c:"12.01.2020",d:"Lorem ipsum dolor sit amet"},
        {a:2,b:7,c:"12.01.2020",d:"Nunc egestas a nulla nibh"},
        {a:3,b:8,c:"12.01.2020",d:"Pretium faucibus tinbunt tinbunt Nulla"},
        {a:4,b:1,c:"12.01.2020",d:"Nunc metus pulvinar vitae non"},
       ],
pole2=[{a:1,b:"Lorem",c:0},
       {a:2,b:"Egestas",c:1},
       {a:3,b:"Faucibus",c:1},
       {a:4,b:"Tinbunt",c:1},
       ]
]

[debian]

Nešlo by se podívat co to vůbec JSON je? Jako sorry, ale s tímhle přístupem narazíš na každym malinkatym problému, kterých je programování plný.

Můžeš si je vnořit:

[

[{a:1,b:5,c:"12.01.2020",d:"Lorem ipsum dolor sit amet"},

{a:2,b:7,c:"12.01.2020",d:"Nunc egestas a nulla nibh"},

{a:3,b:8,c:"12.01.2020",d:"Pretium faucibus tinbunt tinbunt Nulla"},

{a:4,b:1,c:"12.01.2020",d:"Nunc metus pulvinar vitae non"},

],

[{a:1,b:"Lorem",c:0},

{a:2,b:"Egestas",c:1},

{a:3,b:"Faucibus",c:1},

{a:4,b:"Tinbunt",c:1},

] ]

A přistupovat k tomu jako o[0] a o[1]

Nebo je mít jako objekt: {

"pole1": [{a:1,b:5,c:"12.01.2020",d:"Lorem ipsum dolor sit amet"},

{a:2,b:7,c:"12.01.2020",d:"Nunc egestas a nulla nibh"},

{a:3,b:8,c:"12.01.2020",d:"Pretium faucibus tinbunt tinbunt Nulla"},

{a:4,b:1,c:"12.01.2020",d:"Nunc metus pulvinar vitae non"},

],

"pole2": [{a:1,b:"Lorem",c:0},

{a:2,b:"Egestas",c:1},

{a:3,b:"Faucibus",c:1},

{a:4,b:"Tinbunt",c:1},

] }

A přistupovat k tomu jako o.pole1 a o.pole2

[Kolejdoucí]

Tak tohle tím loaderem neprojde

[
        [
                {"a":1,"b":5,"c":"12.01.2020","d":"Lorem ipsum dolor sit amet"},
                {"a":2,"b":7,"c":"12.01.2020","d":"Nunc egestas a nulla nibh"},
                {"a":3,"b":8,"c":"12.01.2020","d":"Pretium faucibus tinbunt tinbunt Nulla"},
                {"a":4,"b":1,"c":"12.01.2020","d":"Nunc metus pulvinar vitae non"},
        ],
        
        [
                {"a":1,"b":"Lorem","c":0},
                {"a":2,"b":"Egestas","c":1},
                {"a":3,"b":"Faucibus","c":1},
                {"a":4,"b":"Tinbunt","c":1},
        ]
]

a tohle taky ne

{
        "pole1": [
                {"a":1,"b":5,"c":"12.01.2020","d":"Lorem ipsum dolor sit amet"},
                {"a":2,"b":7,"c":"12.01.2020","d":"Nunc egestas a nulla nibh"},
                {"a":3,"b":8,"c":"12.01.2020","d":"Pretium faucibus tinbunt tinbunt Nulla"},
                {"a":4,"b":1,"c":"12.01.2020","d":"Nunc metus pulvinar vitae non"},
        ],
        
        "pole2": [
                {"a":1,"b":"Lorem","c":0},
                {"a":2,"b":"Egestas","c":1},
                {"a":3,"b":"Faucibus","c":1},
                {"a":4,"b":"Tinbunt","c":1},
        ]
}

Jinak práce se soubory nejsou vůbec jednoduchá záležitost a věřím, že ani pro profíka, natož úplného amatéra. Tak, že pokud mě nikdo neporadí, končím - tohle podle žádného tutoriálu bohužel nedám. Trápím se s tím > týden

[debian]

Já chápu že to není lehký, ale snažim se tě (jako profík) naučit jak postupovat, protože takhle to nejde.

Už víš že si máš přečíst dokumentaci. Teď se nauč jak validovat vstup, když "to neprojde".

jsonlint.com (JSON validator do Googla)

Odpověď je jednoduchá, ale schválně ti ji nepíšu.

[Kolejdoucí]

Tak podle validátoru jsem to opravil hned, ale je zajímavé, že někdy to vadí a někdy ne. V každém případě moc děkuji.

[👻]

musíš jako číst takový ty chybový hlášení coto jako piše do webový konzole ;D

u těch vnořenejch polí mozilla napsala

SyntaxError: JSON.parse: unexpected character at line 7 column 9 of the JSON data

nóóóó a na tý pozici v souboru je končicí hranatá závorka. se jako podrbu na za uchem a začnu přemejšlet proč by jako hergot měla hranatá závorka něčemu vadit jako aproč ji jako tam nečeká?????? začnu tim že se podivám coje jakoby před tou závorkou a co nevidim!!!!!!!!! čárka za posledním elementem pole!!!!! tak ji jako odmáznu protože v json nekončí pole čárkou čárka je separátor mezi prvkama. nóóóó znova to pustim a znova si to jako bude stěžovat na stejnou věc alev druhým poli. umáznu pustim a už to jede!!!!! :O :O :D ;D

u tý druhý ukázky uplně stejně. problém sou ty čárečky ;D

hele celkem dobrej tutorial na json ;D

[Kolejdoucí]

Aha, tak to Chrome mi psal zcela něco jiného.

Tak už to ukládá, načítá, čeština taky ok, už jen nějakým kouzlem ošetřit tu asynchroní funkci aby program neběžel dál dokud se soubor nenačte. Jinak taky moc děkuji i tobě.

[debian]

FileReader.onabort

FileReader.error

[Kolejdoucí]

Tomu vůbec nerozumím jak to pozná, že se to načetlo a běh programu může pokračovat

[debian]

Nemyslíš doufám return?

[debian]

Jo ty myslíš detekci toho parsování? To musíš výjímky:

try {

jsonObj = JSON.parse(response);

} catch(e) {

// něco se posralo

}

[Kolejdoucí]

// něco se posralo tak to už dávno.. A ta výjímka je synchronní? Bude čekat program na rozhodnutí té výjímky jak to dopadlo s načteným souborem?

[debian]

Řekl bych že nepočká, ale jsem céčkař, tak to ber s rezervou. Použij ten try block jen okolo toho JSON.parse volání a nemusíš to dál řešit, tam už nic asynchronního neni. Tzn tak jak jsem napsal.

[👻]

nepočká :'(

[👻]

si myslim že si se blbě kouknul :O :O kolemjdoucí piše dokud néé pokud ;D

nóóó js je asynchroní a používaj se tam takzvaný callbacky. callback je taková funkce co se zavolá až jiná funkce zkončí. s callbackem takle nějak debianův příklad

<html>
<head>
<meta charset="UTF-8">
</head>
  <body>
  <input type='file' accept='*' onchange='loadJson(event,neco_dalsiho)'>
  <script>
  function neco_dalsiho(nacteno)
  {
  console.log("tady se pokracuje");
  console.log(nacteno);
  }
  
    function loadJson(event,callback) {
      var input = event.target;
      var reader = new FileReader();

      reader.onload = function(){ // pozor, FileReader je asynchronni
        var json_txt = reader.result;
        var json_obj = JSON.parse(json_txt);
        console.log(json_obj) // s tim si pracuj
        var nacteno=json_obj;
        callback(nacteno);
      };
      reader.readAsText(input.files[0]);
    };
    
  </script>
  </body>
</html>

joa prej sou teďko v javascriptu in nějaký promise hele :O ;D

[debian]

Máš pravdu kočko, jsem přepracovanej a píšu hovna

[👻]

snaha se cení ;D

[Kolejdoucí]

Díky moc, jdu to vyzkoušet. Je tam nějaký memory limit? Zkoušel jsem načíst JSON file o velikost 700MB a pohoda, sice se načíta 35 minut ale dal to

[👻]

jako v samotným js prej ne ale omezovat zdroje muže třeba prohlížeč

[Kolejdoucí]

Ještě mě napadlo, nešly by použít ty callbacky dva?

<input type='file' accept='*' onchange='loadJson(event,callbackSuccess,callbackError)'>

[👻]

jako mužeš si jich tam nastrkat kolik chceš ale musíš je tam nějak pohandlovat v tý loadjson funkci ;D

pokud bys jako chtěl tamtu promisi tak to byse muselo jinak nato. hele a hele třeba ale jako řikám že to sem ještě nezkoušela tak nevim :D