oggetto Conservare JSON in attributo data in HTML jQuery

Question

sto memorizzazione dei dati che utilizzano il metodo data- in un tag HTML in questo modo:

<td><"button class='delete' data-imagename='"+results[i].name+"'>Delete"</button></td> 

sto poi il recupero dei dati in un callback come questo:

$(this).data('imagename'); 

Che funziona bene. Ciò su cui sono bloccato è il tentativo di salvare l'oggetto anziché solo una delle sue proprietà. Ho provato a fare questo:

<td><button class='delete' data-image='"+results[i]+"'>Delete</button></td> 

Poi ho cercato di accedere alla proprietà nome come questo:

var imageObj = $(this).data('image'); 
console.log('Image name: '+imageObj.name); 

Il registro mi undefined dice. Così sembra che posso memorizzare le stringhe semplici nelle data- attributi ma non riesco a memorizzare oggetti JSON ...

Ho anche provato ad usare questo ragazzo di sintassi senza fortuna:

<div data-foobar='{"foo":"bar"}'></div> 

Qualche idea su come memorizzare un oggetto reale nel tag HTML usando l'approccio data-?

Answer 1

anziché incorporare nel testo basta usare $('#myElement').data('key',jsonObject);

non sarà effettivamente memorizzato nel html, ma se si sta utilizzando jquery.data, tutto ciò che si astrae in ogni caso.

Per ottenere risultati JSON indietro non analizzarlo, basta chiamare:

var getBackMyJSON = $('#myElement').data('key'); 

Se hai trovato [Object Object] invece di JSON diretta, basta accedere al tuo JSON dal tasto DATA:

var getBackMyJSON = $('#myElement').data('key').key; 

Answer 2

In realtà, il tuo ultimo esempio:

<div data-foobar='{"foo":"bar"}'></div> 

sembra funzionare correttamente (vedere http://jsfiddle.net/GlauberRocha/Q6kKU/).

La cosa bella è che la stringa nell'attributo dei dati viene automaticamente convertita in un oggetto JavaScript. Non vedo alcun inconveniente in questo approccio, al contrario! Un attributo è sufficiente per memorizzare un intero set di dati, pronto per l'uso in JavaScript tramite le proprietà dell'oggetto.

(Nota: per gli attributi dei dati viene assegnato automaticamente il tipo Oggetto anziché String, è necessario fare attenzione a scrivere JSON valido, in particolare per racchiudere i nomi dei tasti tra virgolette).

Answer 3

Per me funziona così, come ho bisogno di memorizzare in template ...

// Generate HTML 
var gridHtml = '<div data-dataObj=\''+JSON.stringify(dataObj).replace(/'/g, "\\'");+'\'></div>'; 

// Later 
var dataObj = $('div').data('dataObj'); // jQuery automatically unescape it 

Answer 4

Utilizzando il documented jquery .data(obj) syntax consente di memorizzare un oggetto sul elemento DOM. L'ispezione dell'elemento non mostrerà l'attributo data- perché non esiste una chiave specificata per il valore dell'oggetto.Tuttavia, i dati all'interno dell'oggetto possono essere referenziati con la chiave con .data("foo") oppure l'intero oggetto può essere restituito con .data().

Quindi supponendo che si imposta un ciclo e result[i] = { name: "image_name" }:

$('.delete')[i].data(results[i]); // => <button class="delete">Delete</delete> 
$('.delete')[i].data('name'); // => "image_name" 
$('.delete')[i].data(); // => { name: "image_name" } 

Answer 5

Per qualche ragione, la risposta accettata funzionato per me solo se viene usato una volta sulla pagina, ma nel mio caso stavo cercando di salvare i dati su molti elementi della pagina e i dati sono stati in qualche modo persi su tutti tranne il primo elemento.

In alternativa, ho finito per scrivere i dati sul dom e analizzarli di nuovo quando necessario. Forse è meno efficiente, ma ha funzionato bene per il mio scopo perché sto davvero prototipando i dati e non scrivendo questo per la produzione.

Per salvare i dati che ho usato:

$('#myElement').attr('data-key', JSON.stringify(jsonObject)); 

Per poi leggere i dati della schiena è la stessa come la risposta accettata, vale a dire:

var getBackMyJSON = $('#myElement').data('key'); 

Facendo in questo modo ha anche fatto apparire i dati nella dom se dovessi ispezionare l'elemento con il debugger di Chrome.

Answer 6

.data() funziona perfettamente per la maggior parte dei casi. L'unica volta che ho avuto un problema era quando la stringa JSON stessa aveva una sola citazione. Non riuscivo a trovare un modo semplice per superare questo modo fatto ricorso a questo approccio (sto usando Coldfusion come linguaggio server):

<!DOCTYPE html> 
     <html> 
      <head> 
       <title> 
        Special Chars in Data Attribute 
       </title> 
       <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
       <script src="https://code.jquery.com/jquery-1.12.2.min.js"></script> 
       <script> 
        $(function(){ 
         var o = $("##xxx"); 
         /** 
          1. get the data attribute as a string using attr() 
          2. unescape 
          3. convert unescaped string back to object 
          4. set the original data attribute to future calls get it as JSON. 
         */ 
         o.data("xxx",jQuery.parseJSON(unescape(o.attr("data-xxx")))); 
         console.log(o.data("xxx")); // this is JSON object. 
        }); 
       </script> 
       <title> 
        Title of the document 
       </title> 
      </head> 
      <body> 
       <cfset str = {name:"o'reilly's stuff",code:1}> 
<!-- urlencode is a CF function to UTF8 the string, serializeJSON converts object to strin --> 
       <div id="xxx" data-xxx='#urlencodedformat(serializejson(str))#'> 
       </div> 
      </body> 
     </html> 

Answer 7

Un sacco di problemi con la memorizzazione dei dati serializzati può essere risolto con la conversione della stringa serializzata a base64 . Una stringa base64 può essere accettata praticamente ovunque senza problemi. Date un'occhiata a:

atob() 
btoa() 

Converti in/da se necessario.

Answer 8

Ecco come ha funzionato per me.

Per salvare un JSON nell'attributo di dati HTML, oggetto JSON stringa e codificarlo con il metodo "encodeURIComponent()".

Durante la lettura dei dati, decodificarli con il metodo "decodeURIComponent()" e analizzare la stringa sull'oggetto JSON.

Esempio:

var my_object ={"Super Hero":["Iron Man", "Super Man"]}; 

dati di risparmio:

var data_str = encodeURIComponent(JSON.stringify(my_object)); 
$("div#mydiv").attr("data-hero",data-str); 

Lettura dei dati:

var data_str = $("div#mydiv").attr("data-hero"); 
var my_object = JSON.parse(decodeURIComponent(data_str)); 

Answer 9

Per la cronaca, ho trovato il seguente codice funziona. Ti consente di recuperare la matrice dal tag dei dati, inserire un nuovo elemento e memorizzarlo nel tag dei dati nel formato JSON corretto. Lo stesso codice può quindi essere utilizzato nuovamente per aggiungere ulteriori elementi all'array, se lo si desidera. Ho trovato che $('#my-data-div').attr('data-namesarray', names_string); memorizza correttamente la matrice, ma $('#my-data-div').data('namesarray', names_string); non funziona.

<div id="my-data-div" data-namesarray='[]'></div> 

var names_array = $('#my-data-div').data('namesarray'); 
names_array.push("Baz Smith"); 
var names_string = JSON.stringify(names_array); 
$('#my-data-div').attr('data-namesarray', names_string); 

Answer 10

Il trucco per me è stato quello di aggiungere virgolette doppie chiavi e valori. Se usi una funzione php come json_encode, otterrai una stringa json con codifica e un'idea su come codificarti.

jQuery ('# elm-id'). Data ('datakey') restituirà un oggetto della stringa, se la stringa è correttamente codificata come json.

Come da documentazione di jQuery: (http://api.jquery.com/jquery.parsejson/)

passando un malformati risultati stringa JSON in un'eccezione JavaScript che sono gettati. Ad esempio, i seguenti sono tutte le stringhe JSON non validi:

1. "{test: 1}" (test non ha doppi apici intorno ad esso).
2. "{'test': 1}" ('test' utilizza le virgolette singole anziché le virgolette doppie).
3. "'test'" ('test' utilizza le virgolette singole anziché le virgolette doppie).
4. ".1" (un numero deve iniziare con una cifra; "0.1" sarebbe valido).
5. "undefined" (undefined non può essere rappresentato in una stringa JSON; null, tuttavia, può essere).
6. "nan" (NaN non può essere rappresentato in una stringa JSON; rappresentanza diretta di Infinity è anche n