HTML jQuery의 데이터 속성에 JSON 개체 저장
는 이터 the the the the the the the 를 사용하여 데이터를 저장하고 .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-접??
마지막 예는 다음과 같습니다.
<div data-foobar='{"foo":"bar"}'></div>
정상적으로 동작하고 있는 것 같습니다(http://jsfiddle.net/GlauberRocha/Q6kKU/) 참조).
좋은 점은 데이터 속성의 문자열이 자동으로 JavaScript 객체로 변환된다는 것입니다.반대로 이 방법에는 아무런 단점도 없습니다!오브젝트 속성을 통해 JavaScript에서 사용할 수 있는 전체 데이터 세트를 저장하는 데는 하나의 속성으로 충분합니다.
(주의: 데이터 속성에 String이 아닌 Object 유형이 자동으로 지정되도록 하려면 유효한 JSON을 써야 합니다.특히 키 이름을 큰따옴표로 묶어야 합니다).
'어디서든'을 사용하세요.$('#myElement').data('key',jsonObject);
실제로 html에 저장되지는 않지만 jquery.data를 사용하는 경우 모든 것이 추상화됩니다.
JSON을 복구하려면 다음 번호로 문의하십시오.
var getBackMyJSON = $('#myElement').data('key');
[Object Object] JSON 대신 .
var getBackMyJSON = $('#myElement').data('key').key;
난 이렇게 됐어.
물건
var my_object ={"Super Hero":["Iron Man", "Super Man"]};
세트
인코딩을 사용하여 문자열화된 개체 인코딩URIComponent() 및 Atribute로 설정됩니다.
var data_str = encodeURIComponent(JSON.stringify(my_object));
$("div#mydiv").attr("data-hero",data-str);
얻다
값을 개체로 가져오려면 디코딩된 값을 디코딩과 함께 구문 분석합니다.URIComponent(), 속성 값:
var data_str = $("div#mydiv").attr("data-hero");
var my_object = JSON.parse(decodeURIComponent(data_str));
시리얼화 된 문자열을 base64로 변환함으로써 시리얼화 데이터의 격납에 관한 많은 문제를 해결할 수 있다.
Base64 스트링은 어디서나 부담없이 사용할 수 있습니다.
다음 항목을 참조하십시오.
WindowOrWorkerGlobalScope.btoa()을 만듭니다.이의 각 로 취급됩니다.method는 String의 base-64의 ASCII 스트링을 만듭니다.
WindowOrWorkerGlobalScope.atob()함수는 base-64 인코딩을 사용하여 인코딩된 데이터 문자열을 디코딩합니다.
필요에 따라서 변환합니다.
HTML에 JSON을 저장하는 더 좋은 방법이 있습니다.
HTML
<script id="some-data" type="application/json">{"param_1": "Value 1", "param_2": "Value 2"}</script>
자바스크립트
JSON.parse(document.getElementById('some-data').textContent);
를 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"]
}
저는 그렇게 동작합니다.템플릿에 저장해야 하기 때문에...
// 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_encode그럼 JSON 부호화 문자열과 적절한 부호화 방법을 알 수 있습니다.
jQuery('#elm-id').data('datakey')문자열이 json으로 올바르게 인코딩되어 있는 경우 문자열의 개체를 반환합니다.
jQuery 매뉴얼에 따르면 (http://api.jquery.com/jquery.parsejson/)
잘못된 형식의 JSON 문자열을 전달하면 JavaScript 예외가 느려집니다.예를 들어, 다음은 모두 비활성 JSON 문자열입니다.
"{test: 1}")test을 이용하다"{'test': 1}")'test'큰따옴표 대신 작은따옴표를 사용합니다.)"'test'")'test'큰따옴표 대신 작은따옴표를 사용합니다.)".1"; (숫자는 숫자로 시작해야 합니다.)"0.1"유효합니다)."undefined")undefined문자열로 수 .JSON 문자열로 나타낼 수 없습니다.null아, 아, 아, 아, 아, 아, 아, 아."NaN")NaN문자열로 수 도 nJSON입니다.인피니티
문서화된 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" }
어떤 이유에서인지, 받아들여진 답변은 한 번만 페이지에서 사용할 수 있었지만, 저 같은 경우에는 페이지의 많은 요소에 대한 데이터를 저장하려고 했는데, 첫 번째 요소를 제외한 모든 요소에 대한 데이터가 손실되었습니다.
대안으로, 저는 결국 데이터를 돔에 쓰고 필요할 때 다시 분석하게 되었습니다.효율은 떨어지지만, 실제로 데이터를 프로토타입으로 제작하고 있기 때문에 제 목적에 맞게 잘 작동했습니다.
사용한 데이터를 저장하려면:
$('#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);
그리고 아탑으로 해독해
let tourData = $(this).data("json");
tourData = atob(tourData);
https://oblik.dev/utilities/config/에서 더 나은 방법을 찾았습니다.기본적으로 파서는 큰따옴표 없이 from-json과 같은 오브젝트를 사용합니다.
import { Parser } from 'oblik/utils/config'
let parser = new Parser()
let result = parser.parse('foo: bar, !baz')
console.log(result) // { foo: "bar", baz: false }
기타 예:
<div ob-foo="text: Hello, num: 42">My Foo component</div>
이 포맷이 스탠다드화된 것을 보고 싶습니다.
언급URL : https://stackoverflow.com/questions/8542746/store-json-object-in-data-attribute-in-html-jquery
'programing' 카테고리의 다른 글
| VS 코드에서 "Comments is not allowed in JSON" 오류를 비활성화합니다. (0) | 2023.02.16 |
|---|---|
| 현재 Angular와 호환되는 부트스트랩 3JS 부트스트랩 지시사항? (0) | 2023.02.16 |
| JSON 개체 내 Javascript 검색 (0) | 2023.02.16 |
| $.199에서 $160까지 (0) | 2023.02.16 |
| 루비 해시 개체를 JSON으로 변환하려면 어떻게 해야 합니까? (0) | 2023.02.16 |