Wie erfasst man den Wert eines Datenattributs?

Question

Die JavaScript-Snippet, dass wir haben, ist:

<a href="#" class="n-contact" data-test-socialmedia="{'type': 'facebook', 'options':{'country': 'US' }}">Link</a> 

Ich möchte den Wert der Daten-Test-Typ social abzurufen. Darauf aufbauend möchte ich die Bedingungsanweisung hinzufügen, um zu prüfen, ob der Typ data-test-socialmedia facebook ist. Da wir viele Datenattribute wie diese in der Site haben.

Ich habe mehrere Möglichkeiten ausprobiert und ich bekomme Objekt als Wert. Aber ich brauche den tatsächlichen Wert in diesem Fall ist es Facebook. Freundlich helfen.

Answer 1

Mit jQuery

var elementData = $(".n-contact").attr("data-test-socialmedia").replace(/'/g,'"'), 
 
    parsed = JSON.parse(elementData); 
 

 
console.log(parsed);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#" class="n-contact" data-test-socialmedia="{'type': 'facebook', 'options':{'country': 'US' }}">Link</a>

Answer 2

//first get element 
 
var el = document.getElementsByClassName('n-contact')[0]; 
 
//get data and replace single quotes with double quotes to create valid JSON 
 
var d = el.dataset.testSocialmedia.replace(/'/g, '"') 
 
//parse JSON to javascript object 
 
var parsed = JSON.parse(d, null) 
 
//get country if type is facebook 
 
if(parsed.options == 'facebook') 
 
    console.log(parsed.options.country)

<a href="#" class="n-contact" data-test-socialmedia="{'type': 'facebook', 'options':{'country': 'US' }}">Link</a>

Answer 3

var str = document.querySelector('.n-contact').getAttribute('data-test-socialmedia').replace(/'/g,'"');  
var obj = JSON.parse(str); 
var result = obj.type; 
console.log(result); 

würde es funktionieren.