Speichern Sie das JSON-Objekt im Datenattribut in HTML jQuery

Ich speichere Daten mithilfe des data-Ansatzes 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 ich festhalte, ist der Versuch, das Objekt zu speichern, anstatt nur eine der Eigenschaften davon. Ich habe versucht, dies zu tun:

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

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

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

Das Protokoll sagt es mir undefined. Es scheint also, als könnte 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 verwenden:

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

Haben Sie eine Idee, wie Sie ein tatsächliches Objekt mithilfe des data-Ansatzes im HTML-Tag speichern können ?

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

Es wird nicht wirklich im HTML gespeichert, aber wenn Sie jquery.data verwenden, wird alles trotzdem abstrahiert.

Um den JSON zurückzubekommen , analysieren Sie ihn nicht. Rufen Sie einfach an:

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

Wenn Sie [Object Object]anstelle von direktem JSON erhalten, greifen Sie einfach über den Datenschlüssel auf Ihren JSON zu:

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

Eigentlich dein letztes Beispiel:

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

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

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

(Hinweis: Damit die Datenattribute automatisch den Typ Object anstelle von String erhalten, müssen Sie darauf achten, gültigen JSON zu schreiben, insbesondere um die Schlüsselnamen in doppelte Anführungszeichen zu setzen.)

So hat es bei mir funktioniert.

Objekt

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

einstellen

Codieren Sie das stringifizierte Objekt mit encodeURIComponent () und legen Sie es als Attribut fest:

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

Bekommen

Um den Wert als Objekt zu erhalten, analysieren Sie den decodierten Attributwert mit decodeURIComponent () :

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

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

Ein base64-String kann praktisch überall ohne großen Aufwand akzeptiert werden.

Schauen Sie sich an:

• btoa ()

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

• A nach B()

Die WindowOrWorkerGlobalScope.atob()Funktion decodiert eine Datenfolge, die mit der Base-64-Codierung codiert wurde.

Bei Bedarf nach / von konvertieren.

Für mich funktioniert es so, da ich es in einer Vorlage speichern muss ...

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

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

Der Trick für mich war, doppelte Anführungszeichen um Schlüssel und Werte hinzuzufügen . Wenn Sie eine PHP-Funktion wie verwenden json_encode, erhalten Sie eine JSON-codierte Zeichenfolge und eine Idee, wie Sie Ihre ordnungsgemäß codieren können.

jQuery('#elm-id').data('datakey') gibt ein Objekt der Zeichenfolge zurück, wenn die Zeichenfolge ordnungsgemäß als json codiert ist.

Gemäß der jQuery-Dokumentation: ( http://api.jquery.com/jquery.parsejson/ )

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

1. "{test: 1}"( testhat keine doppelten 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"( undefinedkann nicht in einer JSON-Zeichenfolge dargestellt werden; nullkann es jedoch sein).
6. "NaN"( NaNkann nicht in einer JSON-Zeichenfolge dargestellt werden; die direkte Darstellung von Infinity ist ebenfalls n

Kombinieren Sie die Verwendung von window.btoaund window.atobzusammen mit JSON.stringifyund JSON.parse.

- Dies funktioniert für Zeichenfolgen mit einfachen Anführungszeichen

Codierung der Daten:

var encodedObject = window.btoa(JSON.stringify(dataObject));

Daten dekodieren:

var dataObject = JSON.parse(window.atob(encodedObject));

Hier ist ein Beispiel dafür, wie die Daten später mit dem Klickereignis erstellt und dekodiert werden.

Erstellen Sie den HTML-Code und codieren Sie die Daten:

var encodedObject = window.btoa(JSON.stringify(dataObject));

"<td>" + "<a class='eventClass' href='#' data-topic='" + encodedObject + "'>" 
+ "Edit</a></td>"

Dekodieren Sie die Daten im Klickereignishandler:

$("#someElementID").on('click', 'eventClass', function(e) {
            event.preventDefault();
            var encodedObject = e.target.attributes["data-topic"].value;
            var dataObject = JSON.parse(window.atob(encodedObject));

            // use the dataObject["keyName"] 
}

Mit der dokumentierten Syntax jquery .data (obj) können Sie ein Objekt im DOM-Element speichern. Wenn Sie das Element untersuchen, 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 referenziert .data("foo")oder das gesamte Objekt mit zurückgegeben werden .data().

Angenommen, Sie richten eine Schleife ein 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" }

Aus irgendeinem Grund funktionierte die akzeptierte Antwort für mich nur, wenn sie einmal auf der Seite verwendet wurde. In meinem Fall habe ich jedoch versucht, Daten für viele Elemente auf der Seite zu speichern, und die Daten gingen irgendwie für alle 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, hat aber für meinen Zweck gut funktioniert, weil ich wirklich Daten prototypisiere und diese nicht für die Produktion schreibe.

So speichern Sie die von mir verwendeten Daten:

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

Das Zurücklesen der Daten entspricht der akzeptierten Antwort, nämlich:

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

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

.data()funktioniert in den meisten Fällen perfekt. Das einzige Mal, dass ich ein Problem hatte, war, wenn die JSON-Zeichenfolge selbst ein einfaches Anführungszeichen hatte. Ich konnte keinen einfachen Weg finden, um daran vorbeizukommen, also griff ich auf diesen Ansatz zurück (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>

Für die Aufzeichnung fand ich, dass der folgende Code funktioniert. Sie können das Array aus dem Daten-Tag abrufen, ein neues Element aufschieben und es im richtigen JSON-Format wieder im Daten-Tag speichern. Der gleiche Code kann daher bei Bedarf erneut verwendet werden, um dem Array weitere Elemente hinzuzufügen. Ich habe festgestellt, dass $('#my-data-div').attr('data-namesarray', names_string);das Array korrekt gespeichert wird, 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);

!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...

Dieser Code funktioniert gut für mich.

Daten mit btoa kodieren

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