HTML jQuery의 데이터 속성에 JSON 객체 저장

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 태그에 실제 객체를 저장하는 방법에 대한 아이디어가 있습니까?

텍스트에 포함시키는 대신 $('#myElement').data('key',jsonObject);

실제로는 html에 저장되지 않지만 jquery.data를 사용하는 경우 모든 것이 추상화됩니다.

JSON을 다시 가져 오려면 구문 분석하지 마십시오 .

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

당신이 얻는 경우 [Object Object]대신 직접 JSON의 데이터 만 키하여 JSON에 액세스 :

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

실제로 마지막 예 :

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

잘 작동하는 것 같습니다 ( http://jsfiddle.net/GlauberRocha/Q6kKU/ 참조 ).

좋은 점은 data-attribute의 문자열이 자동으로 JavaScript 객체로 변환된다는 것입니다. 나는이 접근법에서 반대로 단점을 보지 못합니다! 객체 속성을 통해 JavaScript에서 사용할 수 있도록 전체 데이터 세트를 저장하기에 하나의 속성으로 충분합니다.

(참고 : 데이터 속성에 String 대신 자동으로 Object 유형이 제공되도록하려면 특히 키 이름을 큰 따옴표로 묶으려면 유효한 JSON을 작성해야합니다.)

이것이 나를 위해 일한 방법입니다.

목적

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

세트

encodeURIComponent () 로 문자열 화 된 객체를 인코딩하고 속성으로 설정하십시오.

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

가져 오기

값을 객체로 가져 오려면 decodeURIComponent () 속성 값으로 디코딩 된 값을 구문 분석하십시오 .

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

직렬화 된 문자열 을 base64 로 변환하면 직렬화 된 데이터 저장과 관련된 많은 문제를 해결할 수 있습니다 .

base64 문자열은 소란없이 어디에서나 수용 할 수 있습니다.

보세요:

• btoa ()

이 WindowOrWorkerGlobalScope.btoa()메소드는 문자열의 각 문자가 2 진 데이터의 바이트로 처리되는 String 오브젝트에서 base-64로 인코딩 된 ASCII 문자열을 작성합니다.

• atob ()

이 WindowOrWorkerGlobalScope.atob()함수 는 base-64 인코딩을 사용하여 인코딩 된 데이터 문자열을 디코딩 합니다.

필요에 따라 변환합니다.

나를 위해 템플릿에 저장해야 하므로 그렇게 작동합니다 ...

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

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

나를위한 비결은 키와 값 주위에 큰 따옴표 를 추가 하는 것이 었습니다 . PHP 함수를 사용하면 json_encodeJSON 인코딩 문자열과 올바르게 인코딩하는 방법을 알 수 있습니다.

jQuery('#elm-id').data('datakey') 문자열이 json으로 올바르게 인코딩 된 경우 문자열의 객체를 반환합니다.

jQuery 설명서에 따라 : ( http://api.jquery.com/jquery.parsejson/ )

잘못된 JSON 문자열을 전달하면 JavaScript 예외가 발생합니다. 예를 들어, 다음은 모두 유효하지 않은 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입니다.

의 사용 결합 window.btoa과 window.atob함께을 JSON.stringify하고 JSON.parse.

-작은 따옴표를 포함하는 문자열에서 작동합니다.

데이터 인코딩 :

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

데이터 디코딩

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

다음은 click 이벤트로 나중에 데이터를 구성하고 디코딩하는 방법의 예입니다.

html을 구성하고 데이터를 인코딩하십시오.

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

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

click 이벤트 핸들러에서 데이터를 디코딩하십시오.

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

은 Using 문서화 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" }

어떤 이유로 든 수락 된 대답은 페이지에서 한 번만 사용되는 경우에만 효과가 있었지만 제 경우에는 페이지의 많은 요소에 데이터를 저장하려고 시도했지만 첫 번째 요소를 제외한 모든 요소에서 데이터가 손실되었습니다.

대안으로, 데이터를 DOM에 작성하고 필요할 때 다시 구문 분석했습니다. 아마도 비효율적이지만 데이터를 실제로 프로토 타이핑하고 프로덕션 용으로 작성하지 않기 때문에 제 목적으로는 잘 작동했습니다.

내가 사용한 데이터를 저장하려면 :

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

그런 다음 데이터를 다시 읽는 것은 허용되는 답변과 동일합니다.

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

이렇게하면 Chrome 디버거로 요소를 검사 해야하는 경우 데이터가 DOM에 표시됩니다.

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

기록을 위해 다음 코드가 작동한다는 것을 알았습니다. 데이터 태그에서 배열을 검색하고 새 요소를 푸시 한 후 올바른 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);

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

이 코드는 나를 위해 잘 작동합니다.

btoa로 데이터 인코딩

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

그런 다음 atob으로 디코딩하십시오.

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