Vraag Enkele aanhalingstekens in data-attribuut met json


Cosmetische vraag: Ik heb een html-element met mogelijke dimensies voor sommige ingesloten afbeeldingen, deze worden opgeslagen als:

<div class="inside" data-dimensions='{ "s-x": 213, "s-y": 160, "m-x": ...

Ik haal de datadimensie eruit en parseer met jQuery.parseJSON (jQuery.data ("dimensions")) allemaal prima en volg het document van de jQuery op de voet.

Maar ik ben gewend om al mijn HTML-kenmerken in te sluiten in dubbele aanhalingstekens:

<div class="inside" data-dimensions="{ 's-x': 213, 's-y': 160, 'm-x': ...

Maar dan krijg ik een ongeldige JSON-uitzondering. Zijn er manieren om mijn zelf opgelegde 'dubbel aangehaalde html-attributen'-wet te gehoorzamen?


18
2018-03-02 13:42


oorsprong


antwoorden:


Je kunt gebruiken &quot; in plaats van ". Maar het citeren van orgieën is vreselijk (in HTML zelfs meer dan in PHP), dus doe maar beter met het enkele citeren van je html-attributen.

Trouwens, je hoeft het niet te gebruiken .parseJSON - jQuery doet dat automatisch als het data- attribuut begint met { (eigenlijk is het complexer - hier is de regex die wordt gebruikt om te testen of het moet worden geparseerd als JSON: ^(?:\{.*\}|\[.*\])$).


20
2018-03-02 13:48



De JSON-specificatie bepaalt dat sleutels en (tekenreeks) waarden worden vermeld met dubbele aanhalingstekens.

HTML-kenmerken kan worden ingesloten in enkele of dubbele aanhalingstekens.

Persoonlijk zou ik het niet bestrijden en gewoon meegaan met datgene wat de minste hoeveelheid wrijving veroorzaakt en het gemakkelijkst voor iedereen te begrijpen is, wat in dit geval is om de HTML-kenmerken te citeren en dubbele aanhalingstekens in de attribuutwaarde te gebruiken.


9
2018-03-02 13:52



Probeer dit en je kunt JSON mooi opgemaakt houden in het attribuut:

$.parseJSON($('.inside').data('dimensions').replace(/'/g,"\""))

9
2017-12-16 14:52



Gebruik &quot; in plaats van " en &apos; in plaats van '.


4
2017-07-08 01:28



Een andere manier is om de functie te gebruiken eval of maak een nieuwe functie aan. Je kunt een van beide gebruiken " of ' in uw JSON en u hoeft het niet te plaatsen " rond de toetsen in het JSON-object.

let el = document.getElementById('example');
let person = (new Function(`return ${el.dataset.person}`))();
console.log(person);
person.age++;
console.log(person.age);
<div data-person="{name:'Natalie Portman',age:35}" id="example"></div>


0
2018-04-26 11:31