it-swarm.com.de

Speichern Sie das JSON-Objekt im Datenattribut in HTML-jQuery

Ich speichere Daten mit dem data--Ansatz in einem HTML-Tag wie folgt:

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

Ich rufe dann die Daten in einem Rückruf wie folgt ab:

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

Das funktioniert gut. Was mir am Herzen liegt, ist der Versuch, das Objekt zu speichern, anstatt nur eine der Eigenschaften des Objekts. Ich habe es versucht:

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

Dann habe ich versucht, auf die Name-Eigenschaft wie folgt zuzugreifen:

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

Das Protokoll sagt mir undefined. Anscheinend kann ich einfache Zeichenfolgen in den data--Attributen speichern, aber ich kann keine JSON-Objekte speichern.

Ich habe auch versucht, dieses Kind der Syntax ohne Glück zu benutzen:

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

Gibt es eine Idee, wie ein aktuelles Objekt mithilfe des data--Ansatzes im HTML-Tag gespeichert werden kann?

113
zumzum

anstatt es in den Text einzubetten, benutze einfach $('#myElement').data('key',jsonObject);

es wird nicht wirklich in der HTML-Datei gespeichert, aber wenn Sie jquery.data verwenden, wird das alles sowieso abstrahiert.

Um die JSON zurückzuholen nicht analysieren , rufen Sie einfach an:

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

Wenn Sie [Object Object] anstelle von direktem JSON erhalten, greifen Sie einfach mit dem Datenschlüssel auf Ihr JSON zu:

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

Eigentlich dein letztes Beispiel:

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

scheint gut zu funktionieren (siehe http://jsfiddle.net/GlauberRocha/Q6kKU/ ).

Das Schöne daran ist, dass die Zeichenfolge im Datenattribut automatisch in ein JavaScript-Objekt konvertiert wird. Ich sehe keinen Nachteil in diesem Ansatz, im Gegenteil! Ein Attribut reicht aus, um einen ganzen Datensatz zu speichern, der in JavaScript durch Objekteigenschaften verwendet werden kann.

(Hinweis: Damit den Datenattributen automatisch der Typ Object und nicht String zugewiesen wird, müssen Sie gültige JSON schreiben, insbesondere, wenn Sie die Schlüsselnamen in Anführungszeichen setzen.).

So hat es für mich funktioniert.

Objekt

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

Einstellen

Kodieren Sie das stringifizierte Objekt mit encodeURIComponent () und setzen Sie es als Attribut: 

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

Erhalten

Um den Wert als Objekt zu erhalten, parsen Sie den dekodierten Wert mit decodeURIComponent () , Attributwert: 

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

Für mich funktioniert es so, als ich muss es in Template speichern ...

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

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

Viele Probleme beim Speichern serialisierter Daten können durch Konvertieren des serialisierten Strings in base64 gelöst werden. 

Eine base64-Zeichenfolge kann fast ohne Probleme angenommen werden. 

Schauen Sie sich an:

Die WindowOrWorkerGlobalScope.btoa()-Methode erstellt eine Base-64-Codierung ASCII string aus einem String-Objekt, in dem jedes Zeichen in der String wird als ein Byte von Binärdaten behandelt.

Die WindowOrWorkerGlobalScope.atob()-Funktion decodiert eine Datenzeichenfolge welches mit der Base-64-Codierung codiert wurde.

Konvertieren Sie bei Bedarf nach/von. 

6
Dan

Der Trick für mich bestand darin, doppelte Anführungszeichen um Schlüssel und Werte hinzuzufügen. Wenn Sie eine PHP-Funktion wie json_encode verwenden, erhalten Sie eine json-kodierte Zeichenfolge und eine Idee, wie Sie Ihre kodieren können. 

jQuery ('# Elm-id'). data ('datakey') gibt ein Objekt des Strings zurück, wenn der String ordnungsgemäß als Json codiert ist.

Laut jQuery-Dokumentation: ( http://api.jquery.com/jquery.parsejson/ )

Das Übergeben einer fehlerhaften JSON-Zeichenfolge führt dazu, dass eine JavaScript-Ausnahme ausgelöst wird. Zum Beispiel sind alle ungültigen JSON-Zeichenfolgen:

  1. "{test: 1}" (Der Test enthält keine Anführungszeichen).
  2. "{'test': 1}" ('test' verwendet einfache Anführungszeichen anstelle von doppelten Anführungszeichen).
  3. "'test'" ('test' verwendet einfache Anführungszeichen anstelle von doppelten Anführungszeichen).
  4. ".1" (eine Zahl muss mit einer Ziffer beginnen; "0.1" wäre gültig).
  5. "undefined" (undefined kann nicht in einer JSON-Zeichenfolge dargestellt werden; null kann jedoch sein).
  6. "NaN" (NaN kann nicht in einem JSON-String dargestellt werden; direkte Darstellung von Infinity ist auch n.)
3
George Donev

.data() funktioniert in den meisten Fällen einwandfrei. Ich hatte nur ein Problem, als der JSON-String selbst ein einzelnes Zitat hatte. Ich konnte keinen einfachen Weg finden, um daran vorbeizukommen, also auf diesen Ansatz zurückgreifen (ich verwende Coldfusion als Serversprache):

    <!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>
0
Sajjan Sarkar

Für das Protokoll fand ich den folgenden Code funktioniert. Sie können das Array aus dem Datentag abrufen, ein neues Element hinzufügen und das Datentag im richtigen JSON-Format speichern. Derselbe Code kann daher erneut verwendet werden, um gegebenenfalls weitere Elemente zum Array hinzuzufügen. Ich habe festgestellt, dass $('#my-data-div').attr('data-namesarray', names_string); das Array korrekt speichert, aber $('#my-data-div').data('namesarray', names_string); nicht funktioniert.

<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);
0
Bazley

Mit der Syntax documented jquery .data (obj) können Sie ein Objekt im DOM-Element speichern. Bei der Überprüfung des Elements wird das data--Attribut nicht angezeigt, da für den Wert des Objekts kein Schlüssel angegeben ist. Daten innerhalb des Objekts können jedoch per Schlüssel mit .data("foo") referenziert werden oder das gesamte Objekt kann mit .data() zurückgegeben werden.

Angenommen, Sie erstellen eine Schleife und 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" }
0
user2069751

Aus irgendeinem Grund funktionierte die akzeptierte Antwort nur für mich, wenn sie einmal auf der Seite verwendet wurde. In meinem Fall versuchte ich jedoch, Daten zu vielen Elementen auf der Seite zu speichern, und die Daten gingen bei allen außer dem ersten Element verloren.

Als Alternative schrieb ich die Daten in den dom und analysierte sie bei Bedarf wieder. Vielleicht ist es weniger effizient, aber für meinen Zweck hat es gut funktioniert, weil ich wirklich Daten prototypiere und nicht für die Produktion schreibe. 

Speichern der von mir verwendeten Daten:

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

Dann die Daten zurückzulesen, entspricht der akzeptierten Antwort, nämlich:

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

Auf diese Weise wurden auch die Daten im Dom angezeigt, wenn ich das Element mit dem Chrome-Debugger untersuchen würde.

0
Shane E.

Dieser Code funktioniert gut für mich. 

Daten mit btoa verschlüsseln

let data_str = btoa(JSON.stringify(jsonData));
$("#target_id").attr('data-json', data_str);

Und dann mit atob dekodieren

let tourData = $(this).data("json");
tourData = atob(tourData);
0
Hp Sharma
!DOCTYPE html>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
$("#btn1").click(function()
{
person = new Object();
person.name = "vishal";
person.age =20;
    $("div").data(person);
});
  $("#btn2").click(function()
{
    alert($("div").data("name"));
});

});

</script>
<body>
<button id="btn1">Attach data to div element</button><br>
<button id="btn2">Get data attached to div element</button>
<div></div>
</body>


</html>

Anser:-Attach data to selected elements using an object with name/value pairs.
GET value using object propetis like name,age etc...
0
Vishal Patel