HTML jQuery में डेटा विशेषता में JSON ऑब्जेक्ट को संग्रहीत करें

Question

मैं data-HTML टैग में दृष्टिकोण का उपयोग करके डेटा संग्रहीत कर रहा हूं जैसे:

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

मैं फिर कॉलबैक में डेटा को इस तरह से पुनः प्राप्त कर रहा हूं:

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

यह ठीक काम करता है। मैं जिस चीज पर अटका हुआ हूं, वह उसके गुणों में से केवल एक के बजाय ऑब्जेक्ट को बचाने की कोशिश कर रहा है। मैंने ऐसा करने की कोशिश की:

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

फिर मैंने इस तरह से नाम संपत्ति तक पहुंचने की कोशिश की:

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

लॉग मुझे बताता है undefined। तो ऐसा लगता है कि मैं data-विशेषताओं में सरल तारों को स्टोर कर सकता हूं लेकिन मैं JSON ऑब्जेक्ट्स को स्टोर नहीं कर सकता ...

मैंने बिना किसी भाग्य के सिंटैक्स के इस बच्चे का उपयोग करने की भी कोशिश की है:

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

data-दृष्टिकोण का उपयोग करके HTML टैग में वास्तविक वस्तु को कैसे संग्रहीत किया जाए, इस पर कोई विचार ?

Answer 1

पाठ में इसे एम्बेड करने के बजाय सिर्फ उपयोग करें $('#myElement').data('key',jsonObject);

यह वास्तव में html में संग्रहीत नहीं किया जाएगा, लेकिन यदि आप jquery.data का उपयोग कर रहे हैं, तो यह सब वैसे भी सार है।

JSON वापस पाने के लिए इसे पार्स न करें, बस कॉल करें:

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

यदि आप [Object Object]सीधे JSON के बजाय मिल रहे हैं , तो डेटा कुंजी द्वारा अपने JSON तक पहुंचें:

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

Comments

इसलिए डेटा-एप्रोच का उपयोग करने से मुझे प्रत्येक डिलीट बटन के लिए वैल्यू स्टोर करने की अनुमति मिलती है (प्रत्येक बटन को एक अलग जसन ऑब्जेक्ट मिल जाता है ...) मेरे पास hmtl टैग में डालकर टेबल है जैसे मैंने ऊपर दिखाया। क्या आप सुझाव दे रहे हैं कि मैं प्रत्येक वस्तु को संबंधित डिलीट बटन के साथ जोड़ने की अनुमति दूं? मैं ऐसा कैसे करूंगा, मैं $ ('# myElement') का उपयोग कैसे करूंगा। उसी तरह से? क्षमा करें, मुझे इस पर अनुभव नहीं है। धन्यवाद

— zumzum

इसलिए मैंने प्रत्येक html बटन को एक इंडेक्स निर्दिष्ट किया: <td> <बटन क्लास = 'डिलीट' डेटा-इंडेक्स = '"+ i +" "> डिलीट </ बटन> </ td>, और JSON ऑब्जेक्ट्स की एक सरणी को संग्रहीत करना। एक $ वस्तुओं चर में। फिर जब एक बटन पर क्लिक किया जाता है तो मैं बटन इंडेक्स को देख कर करता हूं: var buttonIndex = $ (यह) .data ('इंडेक्स'); और फिर मुझे इस तरह से पहले से बची हुई वस्तु मिलती है: $ ऑब्जेक्ट [बटनइंडेक्स]। यह ठीक काम करता है, सुनिश्चित नहीं है कि यह करने का सही तरीका है। आपकी प्रतिक्रिया के लिए धन्यवाद!

— झुमझम

यदि क्षेत्र में PHP एन्कोडिंग से JSON है, तो आप इसके बजाय बस ऐसा करना चाह सकते हैं: htmlspecialchars(json_encode($e))( निकोलस उत्तर टिप्पणियों से विचार )।

— CPHPython

पहले उदाहरण में, jsonObjectकड़े होने की आवश्यकता है? संपादित करें: यदि यह किसी और की मदद करता है, तो मुझे उस प्रश्न का उत्तर यहां मिला: stackoverflow.com/a/42864472 "You don't need to stringify objects to store them using jQuery.data()"

— user1063287

Answer 2

वास्तव में, आपका अंतिम उदाहरण:

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

अच्छी तरह से काम करने लगता है (देखें http://jsfiddle.net/GlauberRocha/Q6kKU/ )।

अच्छी बात यह है कि डेटा में विशेषता स्ट्रिंग स्वचालित रूप से जावास्क्रिप्ट ऑब्जेक्ट में बदल जाती है। मैं इस दृष्टिकोण में कोई कमी नहीं देखता, इसके विपरीत! एक गुण डेटा के एक पूरे सेट को स्टोर करने के लिए पर्याप्त है, जो ऑब्जेक्ट गुणों के माध्यम से जावास्क्रिप्ट में उपयोग के लिए तैयार है।

(नोट: डेटा के लिए- स्ट्रिंग के बजाय ऑब्जेक्ट को स्वचालित रूप से दिए जाने वाले गुणों के लिए, आपको मान्य JSON लिखने के लिए विशेष रूप से दोहरे उद्धरण चिह्नों में संलग्न करने के लिए सावधान रहना चाहिए)।

Comments

यह किसी को भी मदद करता है, तो यहां से ऊपर तक पहुँचने के लिए है: $('div').data('foobar').foo। api.jquery.com/data

— गैरी

@GlauberRocha, क्या होगा यदि डेटा में एकल उद्धरण हो? 'मेरे लिए काम नहीं कर रहा है, जबकि मैं echo json_encode($array)php से चूंकि यह एकल उद्धरण द्वारा विशेषता मूल्य को समाप्त करेगा। सरणी से मैन्युअल रूप से एकल उद्धरण से बचने के अलावा कोई सुझाव।?

— रवि धोरिया

@ Log1c an बस एक विचार: अपने 'को "(डबल-एस्केप HTML इकाई) के रूप में एन्कोडिंग करने का प्रयास करें, इसलिए यह आपके स्रोत में & quot; लेकिन हो सकता है कि इस तरह की चीज़ से आप बचना चाहते हों जब आप कहते हैं कि "मैन्युअल रूप से एकल उद्धरण से बचना" ...

— निकोलस ले थिएरी डी'नेक्विन

@GlauberRocha उत्तर के लिए धन्यवाद। मैंने उसी चाल का उपयोग करके इसे हल किया। मैंने htmlspecialchars () [ php.net/manual/en/function.htmlspecialchars.php] का उपयोग किया । यह हल हो गया। :)

— रवि धोरिया

मैं इस पद्धति का उपयोग करते समय परेशानी में पड़ गया जब एक वस्तु गुण एक एकल उद्धरण वाला एक स्ट्रिंग था। डेटा विशेषता पहले एकल उद्धरण पर समाप्त होती है और चूंकि यह JSON मान्य नहीं है, इसलिए इसे स्ट्रिंग के रूप में व्याख्या किया जाता है। यह स्ट्रिंग को एन्कोड करने के लिए संभव हो सकता है, लेकिन मैंने पाया कि सबसे आसान समाधान सिर्फ कई डेटा विशेषताओं का उपयोग करना था।

— जॉन हुल्का

Answer 3

इस तरह मेरे लिए काम किया।

वस्तु

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

सेट

एन्कोडिऑकोम्पोनेंट () और विशेषता के रूप में सेट के साथ कड़े ऑब्जेक्ट को एनकोड करें :

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

प्राप्त

किसी ऑब्जेक्ट के रूप में मान प्राप्त करने के लिए, डीकोड किए गए डीकोड के साथ, डिकोड्यूरिकॉमपेंटेंट () , विशेषता मान:

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

Answer 4

क्रमबद्ध डेटा को स्टोरेज स्ट्रिंग के साथ base64 में परिवर्तित करके कई समस्याओं को हल किया जा सकता है ।

आधार 64 स्ट्रिंग को बिना किसी उपद्रव के कहीं भी स्वीकार किया जा सकता है।

पर एक नज़र डालें:

• btoa ()

WindowOrWorkerGlobalScope.btoa()विधि स्ट्रिंग ऑब्जेक्ट जिसमें स्ट्रिंग में प्रत्येक चरित्र बाइनरी डेटा की एक बाइट के रूप में व्यवहार किया जाता है से एक आधार -64 एन्कोड किया गया ASCII स्ट्रिंग पैदा करता है।

• क से ख()

WindowOrWorkerGlobalScope.atob()समारोह डीकोड डेटा जो आधार -64 एन्कोडिंग का उपयोग इनकोडिंग किया गया है की एक स्ट्रिंग।

आवश्यकतानुसार परिवर्तित / से।

Comments

यह जटिल वस्तुओं को विशेषताओं में पारित करने के लिए वास्तव में अच्छी तरह से काम करता है।

— बके

दुर्भाग्य से, बूट में यूनिकोड समस्या है और सभी भाषाओं के लिए उपयुक्त नहीं है।

— अहमदजावदीनेजाद

ब्राउज़र के उपयोग के लिएwindow.btoa

— हेनरी

यह विधि सुंदर बुलेटप्रूफ आईएमओ है। हालाँकि, एक बार जब आप अपने बेस 64 स्ट्रिंग को पुनः प्राप्त करते हैं और अन-एनकोड करते हैं, तो आपने JSON को अनुक्रमित किया है। तो JSON.parseइससे पहले कि आप एक वस्तु के रूप में परिणाम का उपयोग कर सकते हैं touse की जरूरत है ।

— हेनरी

Answer 5

मेरे लिए यह उस तरह से काम करता है, जैसा कि मुझे इसे टेम्पलेट में संग्रहीत करने की आवश्यकता है ...

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

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

Comments

साझा करने के लिए धन्यवाद .. वास्तव में मैं जो देख रहा था ... स्वीकार किए गए उत्तर को पार्स करने की कोशिश करते समय [ऑब्जेक्ट ऑब्जेक्ट] प्राप्त करता रहा।

— बजे अधिक से अधिक

@graitKing आप स्वीकृत उत्तर से JSON को पार्स नहीं करते हैं, आप इसे केवल उस कुंजी के माध्यम से एक्सेस करते हैं जो डेटा नाम के समान है, जैसे कि यदि आपके पास $('body').data('myData', { h: "hello", w: "world" })_____________________________________________________________________________________________________ है तो आपको अपनी JSON ऑब्जेक्ट मिल जाएगी$('body').data().myData

— jave.web

सरल बनाने के लिए, आप कर सकते हैं '<div data-dataObj=\''+ JSON.stringify(dataObj) +'\'></div>'। वे सभी एकल उद्धरण हैं, शुरुआत और अंत बस बच गए हैं, इसलिए यह होने के समान ही होगा'{"some":"thing"}'

— IamFace

@IamFace - replace()json डेटा में प्रदर्शित होने वाले सिंगल कोट्स की संभावना को संबोधित करता है, जो पूरी तरह से संभव है।

— बिल्लोआह

Answer 6

मेरे लिए चाल और मूल्यों के आसपास दोहरी उद्धरण जोड़ना था । यदि आप एक PHP फ़ंक्शन का उपयोग करते हैंjson_encode , तो आपको एक JSON एन्कोडेड स्ट्रिंग और एक विचार मिलेगा कि कैसे आपको ठीक से एनकोड करना है।

jQuery('#elm-id').data('datakey') स्ट्रिंग का एक ऑब्जेक्ट लौटाएगा, अगर स्ट्रिंग को ठीक से एन्कोड किया गया हो तो json के रूप में।

JQuery के दस्तावेज़ के अनुसार: ( http://api.jquery.com/jquery.parsejson/ )

एक जावास्क्रिप्ट JSON स्ट्रिंग में एक विकृत अपवाद में उत्तीर्ण होने के परिणामस्वरूप फेंका जा रहा है। उदाहरण के लिए, निम्नलिखित सभी JSON स्ट्रिंग हैं:

1. "{test: 1}"( testइसके आसपास दोहरे उद्धरण नहीं हैं)।
2. "{'test': 1}"( 'test'डबल कोट्स के बजाय सिंगल कोट्स का उपयोग कर रहा है)।
3. "'test'"( 'test'डबल कोट्स के बजाय सिंगल कोट्स का उपयोग कर रहा है)।
4. ".1"(एक संख्या एक अंक से शुरू होनी चाहिए; "0.1"मान्य होगी)।
5. "undefined"( undefinedJSON स्ट्रिंग में प्रतिनिधित्व नहीं किया जा सकता; nullहालांकि, हो सकता है)।
6. "NaN"( NaNJSON स्ट्रिंग में प्रतिनिधित्व नहीं किया जा सकता है। Infinity का प्रत्यक्ष प्रतिनिधित्व भी n है

Answer 7

के उपयोग कम्बाइन window.btoaऔर window.atobके साथ एक साथ JSON.stringifyऔर JSON.parse।

- यह सिंगल कोट्स वाले स्ट्रिंग्स के लिए काम करता है

डेटा एन्कोडिंग:

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

डेटा को डिकोड करना:

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

---

यहां एक उदाहरण है कि क्लिक इवेंट के साथ डेटा का निर्माण और डिकोड कैसे किया जाता है।

HTML का निर्माण करें और डेटा को एनकोड करें:

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

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

क्लिक इवेंट हैंडलर में डेटा को डीकोड करें:

$("#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"] 
}

Answer 8

का उपयोग करते हुए दस्तावेज jQuery .data (obj) वाक्य रचना आप DOM तत्व की एक वस्तु स्टोर करने के लिए अनुमति देता है। तत्व का निरीक्षण करने से data-विशेषता दिखाई नहीं देगी क्योंकि वस्तु के मूल्य के लिए कोई कुंजी निर्दिष्ट नहीं है। हालाँकि, ऑब्जेक्ट के भीतर डेटा को कुंजी के साथ संदर्भित किया जा सकता है .data("foo")या संपूर्ण ऑब्जेक्ट के साथ लौटाया जा सकता है.data() ।

इसलिए यह मानते हुए कि आप एक पाश स्थापित करते हैं और 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 9

किसी कारण के लिए, स्वीकृत उत्तर केवल मेरे लिए काम करता है यदि पृष्ठ पर एक बार उपयोग किया जा रहा है, लेकिन मेरे मामले में मैं पृष्ठ पर कई तत्वों पर डेटा को बचाने की कोशिश कर रहा था और पहले तत्व को छोड़कर सभी पर डेटा किसी तरह खो गया था।

एक विकल्प के रूप में, मैंने डोम को डेटा लिखना समाप्त कर दिया और जरूरत पड़ने पर उसे वापस भेज दिया। शायद यह कम कुशल है, लेकिन मेरे उद्देश्य के लिए अच्छी तरह से काम किया है क्योंकि मैं वास्तव में प्रोटोटाइपिंग डेटा हूं और उत्पादन के लिए यह नहीं लिख रहा हूं।

मेरे द्वारा उपयोग किए गए डेटा को बचाने के लिए:

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

डेटा वापस पढ़ने के लिए स्वीकार किए गए उत्तर के समान है, अर्थात्:

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

इस तरह से करना भी डेटा को डोम में प्रदर्शित करता है अगर मैं क्रोम के डीबगर के साथ तत्व का निरीक्षण कर रहा था।

Answer 10

.data()ज्यादातर मामलों के लिए पूरी तरह से काम करता है। मुझे केवल एक बार समस्या हुई जब JSON स्ट्रिंग में एक ही उद्धरण था। मुझे इस दृष्टिकोण का सहारा लेने का कोई आसान तरीका नहीं मिल रहा है (मैं सर्वर भाषा के रूप में कोल्डफ्यूज़न का उपयोग कर रहा हूं):

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

रिकॉर्ड के लिए, मुझे निम्नलिखित कोड कार्य मिले। यह आपको डेटा टैग से सरणी को पुनः प्राप्त करने में सक्षम करता है, एक नए तत्व को आगे बढ़ाता है, और डेटा टैग में वापस सहीSON प्रारूप में संग्रहीत करता है। इसी कोड को फिर से उपयोग किया जा सकता है अगर वांछित में आगे तत्वों को जोड़ने के लिए। मैंने पाया कि $('#my-data-div').attr('data-namesarray', names_string);सरणी को सही ढंग से संग्रहीत $('#my-data-div').data('namesarray', names_string);करता है , लेकिन काम नहीं करता है।

<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 12

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

Answer 13

यह कोड मेरे लिए ठीक काम कर रहा है।

डेटा को btoa के साथ एन्कोड करें

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

और फिर इसे एटब के साथ डिकोड करें

let tourData = $(this).data("json");
tourData = atob(tourData);

Comments

दुर्भाग्य से, बूट में यूनिकोड समस्या है और सभी भाषाओं के लिए उपयुक्त नहीं है।

— अहमदजावदीनेजाद