Kirjautuminen

Haku

Tehtävät

Keskustelu: Nettisivujen teko: jQuery parseJSON tulostus

Sivun loppuun

pistemies [04.01.2014 17:00:33]

#

Miten mahtaa totetutua moniulotteisen arrayn tulostus.
Array on tämän tapainen:

{"1":{"language_id":"1","title":"Autumn"},"2":{"language_id":"2","title":"Syksy"}}

Tuossa tuo eka avain (1,2) on sama kuin language_id, ne voisi olla myös järjestysnumeroina (0,1).
Hommassa pitää lisäksi ottaa huomioon se, että noita arrayn silmukoiden lukumäärä ei ole ennalta tiedossa.

Grez [04.01.2014 17:04:56]

#

Siis mikä mahtaa olla ongelmana? Millä tavalla ne käytännössä halutaan "tulostaa"?

Yleensä sisäkkäiset toistuvat rakenteet on helppoa hoitaa rekursiolla. Kuitenkin parhaan tavan keksiminen edellyttäisi että tiedettäisiin millainen lopputuloksen haluttaisiin olevan.

pistemies [04.01.2014 17:29:25]

#

Grez kirjoitti:

Siis mikä mahtaa olla ongelmana? Millä tavalla ne käytännössä halutaan "tulostaa"?

Nuo tekstit on tarkoitus tulostaa lomakkeelle, eri välilehtiin.
Tarkoititko tuon tapaista systeemiä:

http://stackoverflow.com/questions/2203958/jquery-recursive-iteration-over-objects

Tässä hiukan esimerkkiä miten sen pitäisi tulostua:

<div id="language1">
          <input type="text" value="Autumn"/>
</div>

<div id="language2">
          <input type="text" value="Syksy"/>
</div>

The Alchemist [04.01.2014 19:24:01]

#

Sulla ovat käsitteet pahasti hukassa. Kyse ei ole taulukosta vaan oliosta. Taulukossa indeksit olisivat kokonaislukuja ja aina 0-alkuisia. Lisäksi taulukko alustetaan hakasulkein eikä suinkaan aaltosuluilla. Silmukka on kontrollirakenne. Taulukoissa (tai olioissa) ei ole silmukoita vaan indeksejä.

Moniulotteista tietorakennetta iteroidaan tietysti monella silmukalla. Nähdäkseni tässä tapauksessa ei ole kylläkään mitään tarvetta iteroida nestattuja olioita, koska haluat pikemminkin lukea tietoa nimetyistä indekseistä (ks. esimerkki). En kyllä tajua, mikä ihme tässä oon se todellinen ongelma.

var data = {"a": {"foo": "Bar"}, "b": {"foo": "Baz"}};
for (var id in data) {
  // Tapa 1
  console.log(data[id].foo);

  // Tapa 2
  console.log(data[id]["foo"]);
}

pistemies [04.01.2014 19:54:43]

#

Ehdin saada tämän jo melkein toimimaan eachilla. Päätin yksinkertaistaa hakua vielä siten että haetaan aioastaan teksti.
Tässä oli joku ongelma, jostakin syystä tuo input kenttä ei tulostu lainkaan, vaikka tuo alert-testi toimii tuossa silmukassa.

var open = $.get('index.php?route=ajax&folder_id=' + folder_id + '&language_id=<?php echo $language['language_id'];?>'). success(function(data) {
        var mobj =   $.parseJSON(data);
         $.each(mobj,function(key,val){
            alert(key + '=' + val);
             sbox += '   <input type="text" sixe="25"  name="editfolder[<?php echo $language['language_id'];?>][' + key + ']" value="' + val + '"/>';
        });
});

Tämä on nyt data:

[{"title":"Autumn"}]

Ps. Tämä tulostaa minulla "undefined":

 for (var id in data) {
    alert(console.log(data[id].title));
}

The Alchemist [04.01.2014 20:53:48]

#

Ota nyt aluksi nuo php:t pois tuolta.

pistemies [04.01.2014 21:01:41]

#

The Alchemist kirjoitti:

Ota nyt aluksi nuo php:t pois tuolta.

Ne ei häiritse tuota toimintoa.

Ohjelman demo-versio löytyy tuolta:

http://www.pm-netti.com/peku/so/admin/index.php?route=line/kigallery/managefolder&token­=a71b9e65fd3af55037ec90eb942bba44

Tunnukset: User: demo, passwd: demo

Tosin tuossa on vain yksi kieli, mutta kyllä siitä hajua saa.

Ps. Jos jotakuta haluttaa testailla koko projektia omilla sivuillaan, niin se löytyy tuolta:

http://www.opencart.com/index.php?route­=extension/extension/info&extension_id=15227

pistemies [04.01.2014 23:52:18]

#

Muutin muuttujan nimeksi ebox. Sen verran olen testaillut, että jostakin syystä se ei yhdistä tuota success-silmukassa olevaa eboxia.

var ebox = '<div>';
$.get('url'). success(function(data) {
        var mobj =   $.parseJSON(data);
          // Tämä toimii:
            alert(ebox);
          // Tämä ei toimi:
          ebox += '<h1>OK</h1>';
         $.each(mobj,function(key,val){

        });
});
ebox +='</div>';

The Alchemist [05.01.2014 01:09:43]

#

Success ei ole mikään helevetin silmukka. Sinun pitää lukea jQueryn dokumentaatiosta, mitä jQueryn funkkarit tekevät ja miten niitä pitää käyttää. Tuo koko koodinpätkä on täysin päätöntä roskaa. En edes ala setviä sitä, koska sinun täytyy selvästi panostaa enemmän dokumentaation lukemiseen.

pistemies [05.01.2014 08:34:50]

#

The Alchemist kirjoitti:

Sinun pitää lukea jQueryn dokumentaatiosta, mitä jQueryn funkkarit tekevät ja miten niitä pitää käyttää.

Kyllä niitä on tutkittu ja aika paljon muitakin sivuja. Ongelma on se että google ei osaa kunnolla kääntää englantia suomeksi enkä ole löytynyt sellaista koodiesimerkkiä, jonka ymmärrän sopivan tähän tarkoitukseen.

The Alchemist kirjoitti:

Tuo koko koodinpätkä on täysin päätöntä roskaa.

Jos näin on, mikset vaivaudu valistamaan, mikä koodissani on virheellistä, jonka vuoksi se ei toimi?

En mielelläni laittele tänne kovin pitkiä koodeja, mutta pitänee tehdä nyt poikkeus. Tässä se roska on:

$(".folder-button").click(function(e){
 e.preventDefault();
          var folder_id =getParam($(this).attr("id"),'id');
          var folder =getParam($(this).attr("id"),'name');
          var sort_order =getParam($(this).attr("id"),'sort_order');
          var status =getParam($(this).attr("id"),'status');

          var open = '';
          var ebox = '<div id="create-folder">';
         ebox += '<div class="cf-title">Edit folder</div>';
          ebox += '<form action="action" method="post" id="form">';
          ebox += '<div class="field-row">Directory name: <input type="text" name="editfolder" size="15" value="' + folder + '"/></div>';
          ebox += '<div class="field-row">Sort Order: <input type="text" name="sort_order" size="3" value="' + sort_order + '"/></div>';
         ebox += '<div class="field-row">Status:';
          if(status == 1){
                    ebox += '<input type="radio" name="status" value="1" checked="checked"/> Enabled:';
                    ebox += '<input type="radio" name="status" value="0"/> Disabled:';
          }
          else{
                    ebox += '<input type="radio" name="status" value="1"/> Enabled:';
                    ebox += '<input type="radio" name="status" value="0" checked="checked"/> Disabled:';
          }
          ebox += '</div>';
          ebox += '<div id="languages" class="htabs" style="margin-top:16px;">';
          ebox += '<a href="#language1">';
          ebox += '<img src="view/image/flags/gb.png" title="English" />';
          ebox +='English</a>';
          ebox += '<a href="#language2">';
          ebox += '<img src="view/image/flags/fi.png" title="Finnish" />';
          ebox +='Finnish</a>';
          ebox += '</div>';
          ebox += '<div id="language1">';
open = $.get('url?folder_id=' + folder_id + '&language_id=1'). success(function(data) {
        var mobj =   $.parseJSON(data);
         $.each(mobj,function(key,val){
               ebox += 'Album title:   <input type="text" sixe="25"  name="editfolder[1][' + key + ']" value="' + val + '"/>';
        });
});
          ebox +=  '</div>';
                    ebox += '<div id="language2">';
var open = $.get('url?folder_id=' + folder_id + '&language_id=2'). success(function(data) {
        var mobj =   $.parseJSON(data);
         $.each(mobj,function(key,val){
               ebox += 'Album title:   <input type="text" sixe="25"  name="editfolder[2][' + key + ']" value="' + val + '"/>';
        });
});
          ebox +=  '</div>';

          ebox += '<div style="margin-top:16px;margin-left:300px;" ><a class="kg-button" onclick="$(\'#form\').submit();" >Save</a>';
          ebox += '<a class="kg-button" href="qqq">Cancel</a></div>';
          ebox +='<scr'+'ipt type="text/javascript">';
          ebox +='$("#tabs a").tabs();';
          ebox +='$("#languages a").tabs();';
          ebox +='</scr'+'ipt>';
          ebox += '</form>';
          ebox += '</div>';
          $('#newfolder') .html(ebox);
});

Totta kai olisi mahdollista myös tuo kieli hakea ajaxilla ja tulostaa nuo kunkin kielen välilehdet javascript loopissa, mutta en tiedä pätevää miksi se ei tomisi jos ne välilehdet tulostaa php-loopissa.

The Alchemist [05.01.2014 09:42:34]

#

Kerroin jo sinulle, miksei se toimi. Success-funktio ei ole silmukka. Lisäksi sinun pitää opetella javascriptin alkeet ja oppia ymmärtämään, mitä ihmettä se js oikein on. On hyödytöntä antaa sinulle valmista koodia (tai siis "valistaa"), kun et ymmärrä javascriptistä mitään, joten olisit täsmälleen samoissa ongelmissa kymmenen riviä myöhemmin.

Javascript ei ole php:tä eikä sillä voi koodata kuten php:llä koodattaisiin. Tämä viimeisen snippettisi on juuri sellainen viritelmä: yritetty kääntää todella huono php-koodi todella huonoksi javascriptiksi.

pistemies [05.01.2014 10:19:05]

#

The Alchemist kirjoitti:

Kerroin jo sinulle, miksei se toimi. Success-funktio ei ole silmukka. Lisäksi sinun pitää opetella javascriptin alkeet ja oppia ymmärtämään, mitä ihmettä se js oikein on. On hyödytöntä antaa sinulle valmista koodia (tai siis "valistaa"), kun et ymmärrä javascriptistä mitään, joten olisit täsmälleen samoissa ongelmissa kymmenen riviä myöhemmin.

Javascript ei ole php:tä eikä sillä voi koodata kuten php:llä koodattaisiin. Tämä viimeisen snippettisi on juuri sellainen viritelmä: yritetty kääntää todella huono php-koodi todella huonoksi javascriptiksi.

Kokeilempa tässä laitella nuo kaikki välilehdet javascriptillä (vaikka se ei olekaan opencartin tapojen mukaista).

Lisäys:

Olen saanut aikaiseksi tällaisen funktion.
En vaan oikein meinaa tajuta, miten tuota kutsutaan...

var tabs = $.get('ur?folder_id=' + folder_id).success(function(data){
         var mobj =   $.parseJSON(data);
          var response = '';
          for(var i = 0; i< mobj.length;i++){
                    response += '<a href="#language' + getParam(mobj[i],'language_id') + '">';
                    response += '<img src="view/image/flags/' + getParam(mobj[i],'image') + '" title="' + getParam(mobj[i],'name') + '" />';
                    response += getParam(mobj[i],'name') ;
                    response += '<div id="language' + getParam(mobj[i],'language_id') + '">';
                    response += '<?php echo $entry_album_name;?>   <input type="text" sixe="25"  name="editfolder[' + getParam(mobj[i],'language_id') + '][title]" value="' + getParam(mobj[i],'title') + '"/>';
                    response +=  '</div>';
        }
});

  ebox += tabs.success();

Tuossa minulla skriptin alaosassa esimerkki, johon tuo data pitäisi osata purkaa, miten se pitäisi tapahtua?

Ps. Palautan tulokset siis url-stringinä, koska minulla on tuossa tuo getParam funktio muutenkin käytössä.


Ps 2: Onko vika siinä että käytän tuota success-funktiota? Eikö sen sisällä olevia muuttujia voi tulostaa sen ulkopuolella? En ole nähnyt ajax-esimerkeissä mitään muita funktio-vaihtoehtoja kuin tuon success funktion...

Ps 3: Vai pitäiskö kaikki sisältö tehdä valmiiksi php-puolella ja sitten vaan rykäistä ajaxilla se suoraan diviin ilman että javascriptissä käydään dataa mitenkään läpi?

pistemies [05.01.2014 19:27:56]

#

Sain tämän toimimaan kun laittelin kaikki tulostettavat asiat tuon success funktion sisään. Olisihan minun tuo tietysti pitäny hoksata heti.

Ihmettelen kyllä kovasti millaisia guruja tällä palstalla oikein on. Jokainen heistä tiesi tuon ratkaisun mutta kukaan ei uhallakaan halunnut kertoa että laitappa poika ne muutkin jutut sinne succesin sisään... huonoa palvelua.

The Alchemist [05.01.2014 22:02:05]

#

Ehkäpä kukaan muukaan ei vain jaksanut ottaa vastuulleen sitä, että olisi joutunut yksinään opettamaan sinulle javascriptin alkeet. Niin kuin omalta osaltani totesin jo aamusella. Mielestäni siinä ei ole mitään järkeä, koska yhden tai kaksi asiaa opettamalla ei pääse vielä lainkaan eteenpäin. Sinun kannattaisi hankkia suomenkielinen kirja aiheesta, jos englannin kielen taito on rajoittava tekijä nettimatskuun perehtymisessä.

pistemies [05.01.2014 22:36:55]

#

The Alchemist kirjoitti:

Ehkäpä kukaan muukaan ei vain jaksanut ottaa vastuulleen sitä, että olisi joutunut yksinään opettamaan sinulle javascriptin alkeet.

Kyllä tämä foorumi pelkällä olemassaolollaan on ottanut vastuulleen opastaa ihmisiä ohjelmoinnissa. Se tuntuu kantavan vastuunsa huonosti ( tosin kaikki ei varmaankaan ole sattuneet täällä lukemaan viestiäni). Olet itse hiukan hukkateillä, jos yhden selkeän opastavan lauseen kirjoittaminen on niin kovin vastenmielistä.


Sivun alkuun

Vastaus

Aihe on jo aika vanha, joten et voi enää vastata siihen.

Tietoa sivustosta