Làm thế nào để thiết lập định dạng JSON sang HTML5 dữ liệu thuộc tính trong jQuery

Tôi đang cố gắng những HTMLLàm thế nào để thiết lập định dạng JSON sang HTML5 dữ liệu thuộc tính trong jQuery

<div data-params="{a: 1, b: '2'}" id="TEST1"></div> 
<div data-params='{"a": 1, "b": "2"}' id="TEST2"></div>

Sau đó, tôi sử dụng dữ liệu() phương pháp trong jQuery

$('#TEST1').data('params'); //return a string 
$('#TEST2').data('params'); //return a object

Nhưng TEST1 nó không phải là một đối tượng trả về, nhưng một chuỗi, nó chỉ có thể trả về đối tượng TEST2. Nhưng tôi muốn nhận được một đối tượng bằng TEST1, Làm cách nào để làm điều đó?

=============

Cuối cùng, tôi chọn để viết một chức năng để đạt được những nhu cầu riêng của họ

$.fn.data2 = function(key, value) 
{ 
    if (value === undefined) 
    { 
     var data = $(this).data(key); 
     if (typeof(data) === 'string') 
     { 
      var _data = data.replace(/^[\s\r\n]*/g, '').replace(/[\s\r\n]*$/g, ''); 
      if (_data.match(/\{.*\}/) || _data.match(/\[.*\]/)) { 
       try { 
        _data = (new Function('return ' + data))(); 
        if (typeof(_data) == 'object') { 
         $(this).data(key, _data); 
         data = _data; 
        } 
       } catch(ex) {} 
      } 
     } 
     return data; 
    } 
    return $(this).data(key, value); 
};

Nguồn

2011-09-14 Jasper

Nhưng tại sao tôi cố gắng sử dụng plugin jquery.metadata là để làm việc? – Jasper

Có cách nào để jQuery phân tích cú pháp giống như plugin jquery.metadata HTML đầu tiên không? – Jasper

Để được phân tích như một đối tượng, thuộc tính dữ liệu phải là đối tượng JSON được định dạng tốt.

Trong trường hợp của bạn, bạn chỉ cần trích dẫn các khóa đối tượng (như bạn làm trong đối tượng thứ hai). Hãy thử:

<div data-params='{"a": 1, "b": "2"}' id="TEST1"></div>

Để biết thêm thông thấy data method docs, phần có liên quan là một trong này (tôi nhấn mạnh):

Mọi nỗ lực được thực hiện để chuyển đổi chuỗi thành một giá trị JavaScript (điều này bao gồm các phép toán luận , số, đối tượng, mảng và null) nếu không thì nó sẽ được để dưới dạng chuỗi ... ... Khi thuộc tính dữ liệu là đối tượng (bắt đầu bằng '{') hoặc mảng (bắt đầu bằng '[') thì jQuery.parseJSON được sử dụng để phân tích cú pháp chuỗi; phải tuân thủ cú pháp JSON hợp lệ bao gồm tên thuộc tính được trích dẫn.

Nguồn

2011-09-14 01:36:57

+15

Đối với những gì nó có giá trị, tôi nghĩ rằng JSON là rất nghiêm ngặt mà ngay cả bằng cách sử dụng dấu nháy đơn thay vì dấu ngoặc kép là không hợp lệ. – sdleihssirhc

điểm tốt, chỉnh sửa. –

Nhưng tại sao tôi cố gắng sử dụng plugin jquery.metadata là làm việc? – Jasper

Bạn có thể thoát khỏi dấu ngoặc kép bên trong:

<div data-params="{&quot;a&quot;: 1, &quot;b&quot;: &quot;2&quot;}" id="TEST2"></div>

Nhưng không có gì sai với phương pháp thứ hai của bạn là:

<div data-params='{"a": 1, "b": "2"}' id="TEST2"></div>

Tôi sẽ sử dụng đó.

Nguồn

2011-09-14 01:55:10 Paulpro

Có cách nào để jQuery phân tích cú pháp giống như plugin jquery.metadata HTML đầu tiên không? – Jasper

Hãy thử cái này. Đó là cách mà Uikit phân tích cú pháp thuộc tính dữ liệu json. Hy vọng điều này sẽ hữu ích

function str2json(str, notevil) { 
 
    try { 
 
    if (notevil) { 
 
     return JSON.parse(str 
 
         .replace(/([\$\w]+)\s*:/g, function(_, $1){return '"'+$1+'":';}) 
 
         .replace(/'([^']+)'/g, function(_, $1){return '"'+$1+'"';}) 
 
         ); 
 
    } else { 
 
     return (new Function("", "var json = " + str + "; return JSON.parse(JSON.stringify(json));"))(); 
 
    } 
 
    } catch(e) { return false; } 
 
} 
 

 
function options(string) { 
 
    if (typeof string !='string') return string; 
 

 
    if (string.indexOf(':') != -1 && string.trim().substr(-1) != '}') { 
 
    string = '{'+string+'}'; 
 
    } 
 

 
    var start = (string ? string.indexOf("{") : -1), options = {}; 
 

 
    if (start != -1) { 
 
    try { 
 
     options = str2json(string.substr(start)); 
 
    } catch (e) {} 
 
    } 
 

 
    return options; 
 
} 
 

 
var paramsData = document.querySelectorAll('[data-params]')[0].dataset.params; 
 

 
var optionsParsed = options(paramsData); 
 

 
console.log(optionsParsed);

<!doctype html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <meta name="viewport" 
 
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 
 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
 
</head> 
 
<body> 
 
    <div data-params="{hello: 'world'}"></div> 
 
</body> 
 
</html>

Nguồn

2016-11-29 11:49:59

Làm thế nào để thiết lập định dạng JSON sang HTML5 dữ liệu thuộc tính trong jQuery

Trả lời

Các vấn đề liên quan