এইচটিএমএল jQuery এ JSON অবজেক্টটি ডেটা অ্যাট্রিবিউটে সংরক্ষণ করুন

Question

আমি data-এইচটিএমএল ট্যাগে এপ্রোচটি ব্যবহার করে ডেটা সংরক্ষণ করছি :

<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-অ্যাপ্রোচটি ব্যবহার করে কীভাবে কোনও আসল অবজেক্ট সংরক্ষণ করা যায়?

Answer 1

এটি পাঠ্যে এম্বেড করার পরিবর্তে কেবল ব্যবহার করুন $('#myElement').data('key',jsonObject);

এটি আসলে এইচটিএমএলে সংরক্ষণ করা হবে না তবে আপনি যদি jquery.data ব্যবহার করছেন তবে যা কিছু যাই হোক না কেন বিমূর্ত।

JSON ফিরে পেতে এটি বিশ্লেষণ করবেন না , কেবল কল করুন:

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

আপনি যদি [Object Object]সরাসরি জেএসএনের পরিবর্তে পাচ্ছেন , কেবল ডাটা কী দ্বারা আপনার JSON এ অ্যাক্সেস করুন:

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

Comments

সুতরাং ডেটা ব্যবহার করে অ্যাপ্রোচটি আমাকে প্রতিটি ডিলিট বোতামের জন্য মান সংরক্ষণ করতে দেয় (প্রতিটি বোতাম একটি আলাদা জসন বস্তু পায় ...) আমি উপরে যেমন দেখিয়েছি তেমন এইচএমটিএল ট্যাগ রেখে টেবিলে রেখেছি। আপনি কি আমাকে প্রতিটি বস্তুকে সংশ্লিষ্ট মুছুন বোতামের সাথে সংযুক্ত করার অনুমতি দেওয়ার প্রস্তাব দিচ্ছেন? আমি কীভাবে এটি করব, আমি কীভাবে $ ('# myElement') ব্যবহার করব। একই পথে? দুঃখিত, আমি এ সম্পর্কে অভিজ্ঞ নই। ধন্যবাদ

— জুমজুম

সুতরাং আমি প্রতিটি এইচটিএমএল বোতামে একটি সূচী নির্ধারণ করে শেষ করেছি: <td> <বোতাম শ্রেণি = 'মুছুন' ডেটা-সূচক = '"+ i +"'> মুছুন </ বাটন> </td>, এবং JSON অবজেক্টের একটি অ্যারে সঞ্চয় করে রেখেছি একটি $ অবজেক্ট ভেরিয়েবলে। তারপরে যখন একটি বোতাম ক্লিক করা হয় তখন আমি বাটন সূচীটি করে করে দেখি: var বাটনডেক্স = $ (এটি) .ডাটা ('সূচক'); এবং তারপরে আমি আগের মতো সংরক্ষিত থেকে সম্পর্কিত অবজেক্টটি পাই: $ অবজেক্টস [বাটনআইডেক্স]। এটি সূক্ষ্মভাবে কাজ করে, এটি করার সঠিক উপায় কিনা তা নিশ্চিত নয়। আপনার প্রতিক্রিয়ার জন্য ধন্যবাদ!

— জুমজুম

যদি ক্ষেত্রটিতে পিএইচপি এনকোডিং থেকে জেএসএন থাকে তবে আপনি কেবল এটির পরিবর্তে এটি করতে চাইবেন: htmlspecialchars(json_encode($e))( নিকোলাসের উত্তর মন্তব্য থেকে ধারণা )।

— সিপিএইচপিথন

প্রথম উদাহরণে, 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/ )।

সুন্দর জিনিসটি হ'ল ডেটা-অ্যাট্রিবিউটের স্ট্রিংটি স্বয়ংক্রিয়ভাবে একটি জাভাস্ক্রিপ্ট অবজেক্টে রূপান্তরিত হয়। আমি এই পদ্ধতির কোনও ত্রুটি দেখতে পাচ্ছি না, বিপরীতে! একটি বৈশিষ্ট্য পুরো অবধি ডেটা সঞ্চয় করতে যথেষ্ট, যা জাভাস্ক্রিপ্টে অবজেক্ট প্রোপার্টিগুলির মাধ্যমে ব্যবহারের জন্য প্রস্তুত।

(দ্রষ্টব্য: ডেটা-অ্যাট্রিবিউটসগুলিকে স্ট্রিংয়ের পরিবর্তে অবজেক্ট টাইপটি স্বয়ংক্রিয়ভাবে দেওয়ার জন্য, আপনাকে অবশ্যই বৈধ জেএসওএন লিখতে যত্নবান হতে হবে, বিশেষত ডাবল উদ্ধৃতিতে মূল নামগুলি আবদ্ধ করার জন্য)।

Comments

এটা যে কেউ সহায়তা করেন, তাহলে এখানে কিভাবে উপরে অ্যাক্সেস করতে দেওয়া হল: $('div').data('foobar').foo। api.jquery.com/data

— গ্যারি

@ গ্লুবাররোচা, যদি ডেটাতে একক উদ্ধৃতি থাকে? 'আমি echo json_encode($array)পিএইচপি থেকে যখন আমার জন্য কাজ করছে না । যেহেতু এটি একক উদ্ধৃতি দ্বারা বিশিষ্ট মানকে সমাপ্ত করবে। অ্যারে থেকে ম্যানুয়ালি একক উদ্ধৃতি এড়ানো ছাড়া কোনও পরামর্শ?।

— রবি ধোরিয়া ツ

@ লগ 1 সি ツ কেবলমাত্র একটি ধারণা: আপনার ' "(ডাবল- পলায়নযোগ্য এইচটিএমএল সত্তা) হিসাবে এনকোডিং করার চেষ্টা করুন যাতে এটি আপনার উত্সে & quot; হিসাবে রেন্ডার হয়। আপনি যখন "একক উদ্ধৃতি ম্যানুয়ালি পলায়ন" বলতে পারেন তখন আপনি এ জাতীয় জিনিসটি এড়াতে চান ...

— নিকোলাস লে থিয়েরি ডি'এন্নেকুইন

উত্তরটি দেওয়ার জন্য @ গ্লুবাররোচা ধন্যবাদ। আমি একই কৌশল ব্যবহার করে এটি সমাধান করেছি। আমি এইচটিএমএল স্পেসিচালচার্স () [ php.net/manual/en/function.htmlspectedchars.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 স্ট্রিং সৃষ্টি করে।

• atob ()

WindowOrWorkerGlobalScope.atob()ফাংশন decodes ডেটা যা বেস -64 মাধ্যমে সংকেতলিপি হয়েছে একটি স্ট্রিং।

প্রয়োজন অনুসারে / থেকে রূপান্তর করুন।

Comments

জটিল বস্তুগুলিকে অ্যাট্রিবিউটগুলিতে পাস করার জন্য এটি সত্যিই ভাল কাজ করে।

— বাআক্কে 20'19

দুর্ভাগ্যক্রমে, বুটের ইউনিকোড সমস্যা রয়েছে এবং এটি সমস্ত ভাষার জন্য উপযুক্ত নয়।

— আহমাদবাদীনেজাদ

ব্রাউজার ব্যবহারের জন্যwindow.btoa

— হেনরি

এই পদ্ধতিটি বেশ বুলেটপ্রুফ আইএমও। তবে, একবার আপনি আপনার বেস 64 স্ট্রিংটি পুনরুদ্ধার এবং আন-এনকোড করার পরে, আপনি জেএসওএনকে সিরিয়ালাইজ করেছেন। সুতরাং JSON.parseফলাফলটি অবজেক্ট হিসাবে ব্যবহার করার আগে আপনার টাউস দরকার ।

— হেনরি

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

ভাগ করে নেওয়ার জন্য ধন্যবাদ .. ঠিক আমি যা খুজছিলাম ... গ্রহণযোগ্য উত্তরকে বিশ্লেষণ করার চেষ্টা করার সময় [অবজেক্ট অবজেক্ট] পেতে থাকি।

— বৃহত্তর কিং

@ গ্রেটারের মত আপনি জেএসএনকে গৃহীত উত্তর থেকে বিশ্লেষণ করবেন না, আপনি কেবল কী এর মাধ্যমে এটি অ্যাক্সেস করতে পারবেন যা ডেটা নামের সমান, তাই যদি আপনার যেমন $('body').data('myData', { h: "hello", w: "world" })_____________________________________________________________________________________________ থাকে তবে আপনি আপনার JSON অবজেক্টটি পাবেন$('body').data().myData

— jave.web

সরল করার জন্য, আপনি এটি করতে পারেন '<div data-dataObj=\''+ JSON.stringify(dataObj) +'\'></div>'। এগুলি সমস্ত একক উদ্ধৃতি, শুরু এবং '{"some":"thing"}'

— শেষটি

@ আইমফোর্স - জসন ডেটাতে replace()একক উদ্ধৃতি উপস্থিত হওয়ার সম্ভাবনা সম্বোধন করে, যা সম্পূর্ণ সম্ভব।

— বিলেণোহায়

Answer 6

আমার জন্য কৌশলটি ছিল কী এবং মানগুলির দ্বিগুণ উদ্ধৃতি যুক্ত করা । আপনি যদি পিএইচপি ফাংশন ব্যবহার করেন তবে json_encodeআপনাকে একটি জেএসওএন এনকোডেড স্ট্রিং এবং কীভাবে আপনার নিজের যথাযথভাবে এনকোড করবেন তার একটি ধারণা দেবে।

jQuery('#elm-id').data('datakey') স্ট্রিংটি জসন হিসাবে যথাযথভাবে এনকোড করা থাকলে স্ট্রিংয়ের একটি অবজেক্ট ফিরিয়ে দেবে।

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"( undefinedজেএসএন স্ট্রিংয়ে প্রতিনিধিত্ব করা যায় না; nullতবে এটি হতে পারে)।
6. "NaN"( NaNজেএসএন স্ট্রিংয়ে প্রতিনিধিত্ব করা যায় না; অনন্তের প্রত্যক্ষ উপস্থাপনাও এন

Answer 7

ব্যবহারের একত্রিত করুন window.btoaএবং window.atobএকসাথে JSON.stringifyএবং JSON.parse।

- এটি একক উদ্ধৃতিযুক্ত স্ট্রিংয়ের জন্য কাজ করে

ডেটা এনকোডিং:

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

ডেটা ডিকোডিং:

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

---

ক্লিক ইভেন্টের সাথে কীভাবে ডেটা তৈরি করা এবং ডিকোড করা হয় তার উদাহরণ এখানে।

এইচটিএমএল তৈরি করুন এবং ডেটা এনকোড করুন:

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) সিনট্যাক্স ব্যবহার করে আপনাকে ডিওএম এলিমেন্টে কোনও বস্তু সঞ্চয় করতে দেয়। উপাদানটি পর্যবেক্ষণ করে 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

রেকর্ডের জন্য, আমি নিম্নলিখিত কোডের কাজগুলি পেয়েছি। এটি আপনাকে ডেটা ট্যাগ থেকে অ্যারেটি পুনরুদ্ধার করতে, একটি নতুন উপাদানকে পুশ করতে এবং সঠিক জেএসওএন ফর্ম্যাটে ডেটা ট্যাগে এটি পুনরায় সঞ্চয় করতে সক্ষম করে। পছন্দসই যদি অ্যারেতে আরও উপাদান যুক্ত করতে একই কোডটি আবার ব্যবহার করা যায়। আমি খুঁজে পেয়েছি যে $('#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

এই কোডটি আমার পক্ষে ভাল কাজ করছে।

বিটিওএ সহ ডেটা এনকোড করুন

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

এবং তারপর এটিব দিয়ে ডিকোড করুন

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

Comments

দুর্ভাগ্যক্রমে, বুটের ইউনিকোড সমস্যা রয়েছে এবং এটি সমস্ত ভাষার জন্য উপযুক্ত নয়।

— আহমাদবাদীনেজাদ