Ajax, Json, jQuery: použití value jako hodnota atributu

Re:Ajax ->Json->jQuery--->použití value jako hodnota atributu
« Odpověď #15 kdy: 10. 05. 2019, 19:39:57 »
děkuji...tohdle mi je jasné, ale já nedokážu ty hodnoty klíče iterovat na tu událost
hodlám to celé předělat v Rails, ale zatím experimentuju s původní verzí
Vždyť jste sem sám dával kód, který tu iteraci přes obsah toho JSONu dělá. Stačilo ho upravit, aby to HTML nevytvářel prasácky spojováním textů, a to navěšení události by vám pak vyplynulo samo. Třeba takhle:

Kód: [Vybrat]
function createTable1(json) {
    var table = $("<table>", { id: 'kw-list' }); //tabulka má id, takže je zbytečné cpát jí inline styly, lepší je ostylovat to id v externím stylu
    var thead = table.append($("<thead>"));
    var tr = thead.append($("<tr>"));
    tr.append($("<th>", { id: 'listOfKW', colspan: 10, text: 'List of the KW' }));
    tr = thead.append($("<tr>")); //opět lepší nastylovat přes externí CSS
    tr.append($("<th>", { class: 'listOfKW', text: 'Letter' }))
        .append($("<th>", { class: 'listOfKW', text: 'Commission' }))
        .append($("<th>", { class: 'listOfKW', text: 'Status' }))
        .append($("<th>", { class: 'listOfKW', text: 'KW' }))
        .append($("<th>", { class: 'listOfKW', text: 'P' })) //měl jste tam id, ale to musí být v rámci dokumentu unikátní
        .append($("<th>", { class: 'listOfKW', text: 'CAD' })) //měl jste tam id, ale to musí být v rámci dokumentu unikátní
        .append($("<th>", { class: 'listOfKW', text: 'NEST' }))
        .append($("<th>", { class: 'listOfKW', text: 'SAP' }))
        .append($("<th>", { class: 'listOfKW', text: 'SENT' }));
    var tbody = table.append($("<tbody>"));
    $.each(json, function (index, row) {
        tr = tbody.append('<tr>');
        tr.mouseover(function () {
            nhpup.popup(row.Items);
        });
        $.each(row, function (key, value) {
            $('<td>', { class: key + ' ' + value, text: value }) //opět styl v externím CSS
                .appendTo(tr);
        });
    });
    $('#eachTable').append(table);
}
(Je to napsané jen tak od oka, snad tam nebude moc chyb.)

Mimochodem, místo předělávání do RoR bych vám doporučil koupit si nějakou knížku se základy programování webu, abyste se dozvěděl, jak to celé funguje a co s čím souvisí. Každou chvíli se tu ptáte na nějaké detaily, přitom je z dotazů evidentní, že nerozumíte základům – tomu, jak to celé funguje. Slepováním kusů kódu, které vám někdo napíše na diskusním fóru, se programovat nenaučíte. Ptát se můžete na specifické věci, ale k pochopení toho, jak to celé funguje, potřebujete nějaký systematický výklad – ten z odpovědí na diskusním fóru nezískáte.


ZAJDAN

  • *****
  • 2 078
    • Zobrazit profil
    • E-mail
Re:Ajax ->Json->jQuery--->použití value jako hodnota atributu
« Odpověď #16 kdy: 13. 05. 2019, 10:16:58 »
Mimochodem, místo předělávání do RoR bych vám doporučil koupit si nějakou knížku se základy programování webu, abyste se dozvěděl, jak to celé funguje a co s čím souvisí. Každou chvíli se tu ptáte na nějaké detaily, přitom je z dotazů evidentní, že nerozumíte základům – tomu, jak to celé funguje. Slepováním kusů kódu, které vám někdo napíše na diskusním fóru, se programovat nenaučíte. Ptát se můžete na specifické věci, ale k pochopení toho, jak to celé funguje, potřebujete nějaký systematický výklad – ten z odpovědí na diskusním fóru nezískáte.
1) upřímně děkuji, že máte snahu pomoci
2) já vím jak tyto věci fungují, ale špatně jsme se pochopili a já to špatně vyjádřil:
jediné o co mi šlo:
Jsonem přicházejí data obsahující 11indexů/klíčů...tedy co klíč to sloupec v tabulce.
11tý klíč nechci do tabulky vykreslit, ale jeho hodnoty použít jako popUp na klíč1.

1. Metoda ...ten sloupec nechat vykreslit a pomocí css ho schovat a ty hodnoty si z něj převzít(viz můj předchozí příspěvek)
2. Metoda ...definovat jednotlivě <td> který klíč se v něm má vykreslit a ten 11tý vynechat a tato metoda mi právě nešla
Vesele, vesele do továrny dělník běží...vesele, vesele do továrny jde. Vesele se usmívá když mu soustruh zazpívá...vesele, vesele do továrny jde. Vesele si poskočí když se soustruh roztočí ...vesele, vesele do továrny jde.

Re:Ajax ->Json->jQuery--->použití value jako hodnota atributu
« Odpověď #17 kdy: 13. 05. 2019, 12:51:28 »
2. Metoda ...definovat jednotlivě <td> který klíč se v něm má vykreslit a ten 11tý vynechat a tato metoda mi právě nešla
Vy jste původně psal o tom, že chcete tu hodnotu použít při nastavení posluchače události.

Pokud chcete ten klíč vynechat, prostě do výpisu těch sloupců přidejte podmínku. Nebo jinak – ve skutečnosti je ten kód špatně, protože iteruje přes klíče v mapě, což nemá definované pořadí. Ve skutečnosti by se vám tedy hodnoty do tabulky vypsali jinak, než jak máte uvedené názvy sloupců, a teoreticky by mohly být hodnoty uspořádané jinak i v každém řádku tabulky. Takže správně je potřeba vyjmenovat ve správném pořadí klíče, které se mají do tabulky vložit. A v tom výčtu akorát vynecháte ten údaj, který tam  mít nechcete. Takže:

Kód: [Vybrat]
function createTable1(json) {
    var table = $("<table>", { id: 'kw-list' }); //tabulka má id, takže je zbytečné cpát jí inline styly, lepší je ostylovat to id v externím stylu
    var thead = table.append($("<thead>"));
    var tr = thead.append($("<tr>"));
    tr.append($("<th>", { id: 'listOfKW', colspan: 10, text: 'List of the KW' }));
    tr = thead.append($("<tr>")); //opět lepší nastylovat přes externí CSS
    tr.append($("<th>", { class: 'listOfKW', text: 'Letter' }))
        .append($("<th>", { class: 'listOfKW', text: 'Commission' }))
        .append($("<th>", { class: 'listOfKW', text: 'Status' }))
        .append($("<th>", { class: 'listOfKW', text: 'KW' }))
        .append($("<th>", { class: 'listOfKW', text: 'P' })) //měl jste tam id, ale to musí být v rámci dokumentu unikátní
        .append($("<th>", { class: 'listOfKW', text: 'CAD' })) //měl jste tam id, ale to musí být v rámci dokumentu unikátní
        .append($("<th>", { class: 'listOfKW', text: 'NEST' }))
        .append($("<th>", { class: 'listOfKW', text: 'SAP' }))
        .append($("<th>", { class: 'listOfKW', text: 'SENT' }));
    var tbody = table.append($("<tbody>"));
    $.each(json, function (index, row) {
        tr = tbody.append('<tr>');
        tr.mouseover(function () {
            nhpup.popup(row.Items);
        });
        $.each(['letter', 'commission' /* další sloupce */], function (index, key) {
            $('<td>', { class: key + ' ' + row[key], text: row[key] }) //opět styl v externím CSS
                .appendTo(tr);
        });
//Chybný původní kód, pořadí sloupců není zaručené.
//        $.each(row, function (key, value) {
//kdybyste ale tedy chtěl jeden klíč vynechat, prostě jen přidáte podmínku if (key == 'sloupecKVynechani') {return;}
//            $('<td>', { class: key + ' ' + value, text: value }) //opět styl v externím CSS
//                .appendTo(tr);
//        });
    });
    $('#eachTable').append(table);
}


já vím jak tyto věci fungují
Nemyslím to nijak zle, ale nesouhlasím s vámi. Viděl jsem tu už spoustu vašich dotazů, a je z nich zřejmé, že nějak skládáte kód víceméně metodou pokusu a omylu, ale neznáte ty principy, které jsou za tím, nevíte, jak to dohromady funguje. Já vás nechci kritizovat, nikdo učený z nebe nespadl a každý se to musel nějak naučit – mně ale připadá, že tím vaším způsobem se to nikdy nenaučíte. Upřímně řečeno, četl jsem dost vašich dotazů, kde bych uměl odpovědět a odpověď by byla jednoduchá, ale záměrně jsem na ně neodpovídal – protože tohle podle mne není způsob, jak byste se to mohl naučit. A odpovídat na ty dotazy znamená jenom to, že se prodlužuje doba, než přijdete na to, že tudy cesta nevede – a o to pracnější pak pro vás bude doopravdy se to naučit.

Opravdu to vůči vám nemyslím nijak zle, líbí se mi, že se do toho snažíte proniknout a neodrazuje vás hned, když vám něco nejde – ale o to víc mne mrzí, že jste zvolil cestu, která podle mne k cíli nevede.

ZAJDAN

  • *****
  • 2 078
    • Zobrazit profil
    • E-mail
Re:Ajax, Json, jQuery: použití value jako hodnota atributu
« Odpověď #18 kdy: 13. 05. 2019, 13:14:41 »
......
Opravdu to vůči vám nemyslím nijak zle, líbí se mi, že se do toho snažíte proniknout a neodrazuje vás hned, když vám něco nejde – ale o to víc mne mrzí, že jste zvolil cestu, která podle mne k cíli nevede.
díky..Vaše slova beru na vědomí, ale věřte, že i takto se člověk může velmi hodnotně poučit a pochopit
Nejsem full time programátor, tyto věci používám jen dle občasné potřeby, možná i proto se je neučím tak jako Ti, co to používají dnes a denně.
ještě jednou díky
Vesele, vesele do továrny dělník běží...vesele, vesele do továrny jde. Vesele se usmívá když mu soustruh zazpívá...vesele, vesele do továrny jde. Vesele si poskočí když se soustruh roztočí ...vesele, vesele do továrny jde.

Re:Ajax ->Json->jQuery--->použití value jako hodnota atributu
« Odpověď #19 kdy: 24. 05. 2019, 18:29:43 »
1) upřímně děkuji, že máte snahu pomoci
2) já vím jak tyto věci fungují, ale špatně jsme se pochopili a já to špatně vyjádřil:
jediné o co mi šlo:
Jsonem přicházejí data obsahující 11indexů/klíčů...tedy co klíč to sloupec v tabulce.
11tý klíč nechci do tabulky vykreslit, ale jeho hodnoty použít jako popUp na klíč1.

1. Metoda ...ten sloupec nechat vykreslit a pomocí css ho schovat a ty hodnoty si z něj převzít(viz můj předchozí příspěvek)
2. Metoda ...definovat jednotlivě <td> který klíč se v něm má vykreslit a ten 11tý vynechat a tato metoda mi právě nešla

Až tu si sa konečne presne vyjadril čo potrebuješ... Takže tu je tretia metóda, keďže tvoje dve sú zlý nápad: Nevykresluj bunky tabuľky, TD, v cykle. Proste ich vymenuj, len tie, ktoré sa naozaj majú vykresliť.

V nasledovnom príklade obdržím pole objektov, pričom každý objekt obsahu 8 kľúčov. Ale ja proste vykreslím len tri, pričom štvrtý použijem do onclick:

Kód: [Vybrat]
const mountpoint = 'https://jsonplaceholder.typicode.com/users'

const button = $('button')
const tbody = $('tbody')

const loadAndRender = () => {
  $.getJSON(mountpoint).then(data => {

    $.each(data, (idx, val) => {
      let row = $('<tr>')
        .append($('<td>', {
          text: val.id
        }))
        .append($('<td>', {
          text: val.username,
          on: {
            click: _ => {
              alert(val.name)
            }
          }
        }))
        .append($('<td>', {
          text: val.email
        }))

      tbody.append(row)
    })

  })
}

button.on('click', loadAndRender)


Ako to funguje môžeš vyskúšať (klikni na ktorékoľvek username) tu: https://jsbin.com/rinolopugi/edit?output

A ako vyzerá štruktúru dát si môžeš pozrieť tu: https://jsonplaceholder.typicode.com/users


Re:Ajax, Json, jQuery: použití value jako hodnota atributu
« Odpověď #20 kdy: 24. 05. 2019, 19:26:31 »
PS: K tomu príkladu v mojej predošlej odpovedi - keď vymenovávaš kľúče ktoré chceš použiť, môžeš použiť aj deštruktúrovanie a urobiť tak z kľúčov rovno premenné. Môže to aj skrátiť kód:

Kód: [Vybrat]
const mountpoint = 'https://jsonplaceholder.typicode.com/users'

const $button = $('button')
const $tbody = $('tbody')

const loadAndRender = () => {
  $.getJSON(mountpoint).then(data => {

    $.each(data, (index, { id, username, name, email }) => {
      let row = $('<tr>')
        .append($('<td>', { text: id }))
        .append($('<td>', {
          text: username,
          on: {
            click: _ => {
              alert(name)
            }
          }
        }))
        .append($('<td>', { text: email }))

      $tbody.append(row)
    })

  })
}

$button.on('click', loadAndRender)

PPS: názvy premenných button a tbody som zmenil v súlade s nepísanou konvenciou, že ak do premennej ukladáš jQuery objekt, pomenuješ premennú so znakom $ na začiatku. Ku konvenciám ešte dodám, že arrow funkcie nepíšem raz ako () => {} a inokedy ako _ => {} náhodne, ale tiež v rámci konvencií.