ugrás a tartalomhoz

JSON via jQuery

Creative · 2011. Nov. 22. (K), 01.16
Üdv,

Akadt egy dolog, amiben teljesen kezdő vagyok, viszont pár helyen használnom kellene. Mivel életemben nem volt ilyen dolgom, és a hivatalos példán nem igazán igazodom el, itt kérek segítséget benne.
Van egy PHP fájl, melybe document.ready -kor bekérek egy json fájlt
  1. $.getJSON("data.js", function(json){  
  2.     $("#title").text(json.name);  
  3.     $.each(json.dates, function(key, val) {  
  4.         $("<li>" + val + "</li>").appendTo("#list");  
  5.     });  
  6. });  
Na most hibát nem ad vissza, csak üres boxot. Ezt kéne látnom vele:
  1. <h1 id="title">Stewart, Patrick</h1>  
  2. <ul id="list">  
  3.  <li>X-Men kezdetek: Farkas (2009)</li>  
  4.  <li>A Föld (2007)</li>  
  5.  <li>X-Men: Az ellenállás vége (2006)</li>  
  6.  <li>A foci hőskora (2005)</li>  
  7.  <li>A rejtelmes sziget (2005) (TV film)</li>  
  8.  <li>Back to Gaya (2004)</li>  
  9.  <li>Az oroszlán télen (2003) (TV film)</li>  
  10.  <li>X-Men 2 (2003)</li>  
  11. </ul>  
A .json fájl maga pedig így néz ki:
  1. [  
  2.     {  
  3.         "name":"Stewart, Patrick",  
  4.         "sites":[  
  5.         "X-Men kezdetek: Farkas (2009)",  
  6.         "A Föld (2007)",  
  7.         "X-Men: Az ellenállás vége (2006)",  
  8.         "A foci hőskora (2005)",  
  9.         "A rejtelmes sziget (2005) (TV film)",  
  10.         "Back to Gaya (2004)",  
  11.         "Az oroszlán télen (2003) (TV film)",  
  12.         "X-Men 2 (2003)"  
  13.         ]  
  14.     },  
  15.   
  16. ]  
Valamit nagyon elnézek tudom, de sos kellene a help :$ A vége pedig az lenne, hogy ezt nem listában, hanem táblázatban mutatom usernek, s a fájl végére akár új bejegyzést is bevihetek.

C.
‹ Footer probléma Oldal töltését jelző "ablak" ›
 ■
1

A hiba ott van

gabesz666 · 2011. Nov. 22. (K), 01.58
A hiba ott van, hogy te a dates tömbön szeretnél végig menni, de a json fájlban csak sites tömb van.
A táblázatos megjelenítéssel mi a problémád? ul helyett table tag-et kell használnod, majd az iterálás során mindíg beszúrsz egy új sort (tr) és abba egy cellát (td). Csak annyi lesz a változás a mostani állapothoz képest, hogy lesz még egy szinted.
Az új bejegyzés felvitelén meg gondolkodj kicsit! Vezesd le akár rendes mondatokkal, hogy hogyan szeretnéd a problémát megoldani, majd próbáld meg ezt átültetni kód formába. Ha elakadsz segítek!
2

Módosítottam a bekérést,

Creative · 2011. Nov. 22. (K), 12.43
Módosítottam a bekérést, számomra így egyszerűbb volt. Most a PHP fájl elején bekéri a fájl tartalmát, json_decode, majd mikor kiakarom íratni a tömbben lévő objektumokat, tömbösítem őket, így alap tömbökként tud vele bánni a program.
Van egy form is pluszba, mellyel a hozzáadást gondoltam volna megoldani. Egy alap-esetben, mikor php-nek küldök át adatot, ez úgy nézne ki, hogy
  1. var nev = $("#new_name").val();  
  2. var mov1 = $("#new_mov1").val();  
  3. var mov2 = $("#new_mov2").val();  
  4. var mov3 = $("#new_mov3").val();  
  5. var mov4 = $("#new_mov4").val();  
  6. var record = {  
  7.     name: nev,  
  8.     sites: { mov1, mov2, mov3, mov4}  
  9. };  
  10. record.push(item);  
De mivel json-ról van szó, gondolom ez így nem oké, így gondolom egy
  1. var recordString = JSON.stringify(record);  
jól esne neki :) továbbá, mivel fájlkezelésről van szó, még így json-al is, nem kell semmi extra függvénybehívás hozzá? Ugye a .json fájl végére szeretném beszúrni az új rekordot.

C.
3

Szerintem felesleges

gabesz666 · 2011. Nov. 22. (K), 13.30
Módosítottam a bekérést, számomra így egyszerűbb volt. Most a PHP fájl elején bekéri a fájl tartalmát, json_decode, majd mikor kiakarom íratni a tömbben lévő objektumokat, tömbösítem őket, így alap tömbökként tud vele bánni a program.


Szerintem felesleges php-t használni, mivel lényegében semmi módosítás nem történik az adatokkal.

Egy megjegyzés az első kódhoz: nem kell minden egyes változó elé kiírni a var-t, lehet egyszerűsíteni, méghozzá így:
  1. var nev = $("#new_name").val(),  
  2.     mov1 = $("#new_mov1").val(),  
  3.     mov2 = $("#new_mov2").val(),   
  4.     mov3 = $("#new_mov3").val(),   
  5.     mov4 = $("#new_mov4").val(),  
  6.     record = {    
  7.        name: nev,    
  8.        sites: { mov1, mov2, mov3, mov4}    
  9.    };  
A record.sites-al az a baj, hogy te objektumként definiálod és tömbként próbálod meg használni. Az objektumok formátuma kulcs: érték, a tömböknél pedig csak értékek vannak. Ha tömbként akarod használni definiáld aként, tehát: sites: [ mov1, mov2, ... ]

A fájlkezeléshez viszont kelleni fog már egy php hívás és a megfelelő fájlkezelő függvények (file_get_contents, file_put_contents) használata.
4

Akkor az egyszerűség kedvéért

Creative · 2011. Nov. 22. (K), 14.22
Akkor az egyszerűség kedvéért most egyelőre csak console.log -ot használok, mert itt a lényeg :) Megfelelő formátumban átadni a megfelelő információkat.
Eszembe jutott egy megoldás... mivel minden input mezőnek van name attribútuma a hozzáadáskor s egy űrlapon belül szerepelnek ezek logikusan, így elég pl. végigjárni a form minden elemét s megnézni, milyen valuet kapott, s ezt json stringgé fűzni.
Jól gondolom? :$ Mert akkor így sikerülnie kéne (elméletileg):
  1. $("#submit_new").click(function(){  
  2.     var arr = $("#addform").serializeArray();  
  3.     var json = "";  
  4.     jQuery.each(arr, function(){  
  5.         jQuery.each("#addform", function(i, val){  
  6.                 if (i=="name") {  
  7.                         json += '"' + val + '":';  
  8.                 } else if (i=="value") {  
  9.                         json += '"' + val.replace(/"/g, '\\"') + '",';  
  10.                 }  
  11.         });  
  12.     });  
  13.     json = "{" + json.substring(0, json.length - 1) + "}";  
  14.     console.log(json);  
  15.     return false;  
  16. });  
Ezzel azt akarom elérni (s a js kódot hozzá stackoverflow-n leltem), hogy lássam konzolon, de ott egy üres stringet kapok "{ }" :( Ugye, a submit gombra klikkeléskor hívom ezt be, s az id-s űrlapra alkalmazom (alkalmaznám...). Igyekszem gyorsan felfogni a json-os dolgokat, és nem teljesen noobnak tűnni még így elsőre sem :$ De bevallom, kissé kifog rajtam néha...

C.
5

Ha jól sejtem

gabesz666 · 2011. Nov. 22. (K), 14.48
Ha jól sejtem az "addform" egy form-nak az id-je. Ha így van, akkor az 5. sorban végigiterálni az egy darab form elemeden nem túl célravezető. Főleg, hogy feltehetőleg sem name és sem value értéke nincs. Emiatt nem fog belépni egyik feltétel ágba sem, ami következtében a json stringed marad üresen. A megoldás a következő:
  1. $("#submit_new").click(function(){    
  2.     var arr = $("#addform").serializeArray();    
  3.     var json = {};  
  4.     jQuery.each(arr, function(key, index){    
  5.         json[arr[key]['name']] = arr[key]['value'];  
  6.     });    
  7.   
  8.     console.log(json);    
  9.     return false;  
  10. });  
A json objektum az iterálás végén természetesen objektum marad, de könnyedén átalakítható stringgé is.
6

Köszönöm a szemfüles

Creative · 2011. Nov. 22. (K), 20.13
Köszönöm a szemfüles észrevételt és tanácsot :) Most akkor további kérdés lenne még ^^ Mivel mind kitudom iratni egy divbe, mind a konzolba látom, ideje a fájlba beírni. Itt azonban egy kicsi problémába ütköztem (mily meglepő :s...)
jQuery -vel POST metódussal küldök infókat
  1. $.ajax({  
  2.     type: "POST",  
  3.     url: "datas.php",  
  4.     data: { json : JSON.stringify(json) },  
  5.     cache: false,  
  6.     success: function(html){  
  7.         alert('Data was sent properly');  
  8.     }  
  9. });  
A php feldolgozómmal pedig megcsinálom a fájl-műveleteket:
  1. $json = $_POST['json'];  
  2. if (json_decode($json) != null) {  
  3.   $file = fopen('data.json','w+');  
  4.   fwrite($file, $json);  
  5.   fclose($file);  
  6. } else {  
  7. }  
Na most ezzel egy nagy gondom van... Ugye a json fájl alapból egy tömb, melyben objektumok vannak. De ha én ezzel beleírok, akkor a végére írás helyett a következőt csinálja:
- az egész fájlt felülírja, tehát eddigi adat elvész úgy, ahogy volt :(
Erre most próbálok rájönni, hogy lehetne jól megoldani, de ha az eddigi kódban bármi hibát látna vki szemfüles, pls comment :)

C.
7

fopen

thgab · 2011. Nov. 23. (Sze), 10.39
http://php.net/manual/en/function.fopen.php
mivel a feldolgozóban csak írod a file-t, nem kell a +, valamint ha a végére szeretnél írni akkor az 'a' paramétert kell használnod.
  1. $file = fopen('data.json','a');