तो जैसे

Question

मैं भंडारण कर रहा हूँ एक HTML टैग में data- दृष्टिकोण का उपयोग कर डेटा HTML jQuery में डेटा विशेषता में स्टोर JSON ऑब्जेक्ट

$(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'); 

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

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

Answer 2

वास्तव में, अपने पिछले उदाहरण:

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

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

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

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

Answer 3

मेरे लिए यह उस तरह काम करते हैं, के रूप में मैं टेम्पलेट में संग्रहीत करना होगा ...

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

का उपयोग करना documented jquery .data(obj) syntax आप 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 5

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

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

डेटा मैं इस्तेमाल किया सहेजने के लिए: करने से यह इस तरह से भी किया जाता डेटा दिखाई

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

:

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

तो डेटा वापस पढ़ने के लिए स्वीकार किए जाते हैं जवाब, अर्थात् के रूप में ही है डोम में अगर मैं क्रोम के डीबगर के साथ तत्व का निरीक्षण करना चाहता था।

Answer 6

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

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

धारावाहिक डेटा भंडारण के साथ समस्याओं का एक बहुत base64 करने के लिए धारावाहिक स्ट्रिंग में कनवर्ट करके हल किया जा सकता । बेस 64 स्ट्रिंग को बिना किसी झगड़े के कहीं भी स्वीकार किया जा सकता है। एक नज़र डालें:

atob() 
btoa() 

आवश्यकतानुसार/से कनवर्ट करें।

Answer 8

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

HTML डेटा विशेषता में एक JSON को सहेजने के लिए, स्ट्रिंग JSON ऑब्जेक्ट और इसे "encodeURIComponent()" विधि से एन्कोड करें।

डेटा को वापस पढ़ने के दौरान, इसे "decodeURIComponent()" विधि से डीकोड करें और स्ट्रिंग को JSON ऑब्जेक्ट पर पार्स करें।

उदाहरण:

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 9

रिकॉर्ड के लिए, मैंने पाया निम्नलिखित कोड काम करता है। यह आपको डेटा टैग से सरणी पुनर्प्राप्त करने, एक नया तत्व धक्का देने और सही JSON प्रारूप में डेटा टैग में वापस संग्रहीत करने में सक्षम बनाता है। इसलिए वांछित अगर सरणी में आगे तत्व जोड़ने के लिए एक ही कोड का उपयोग किया जा सकता है। मैंने पाया कि $('#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 10

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

jQuery ('# एल्म-आईडी')। डेटा ('datakey') यदि स्ट्रिंग ठीक से json के रूप में इनकोडिंग स्ट्रिंग की एक वस्तु वापस आ जाएगी।

jQuery प्रलेखन के अनुसार: (http://api.jquery.com/jquery.parsejson/)

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

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