JavaScript Custom Tracker

Question

Je voudrais construire un système de suivi pour une application Web construite dans CakePHP 2.x. L'idée est d'avoir tout le lien suivi ayant écrit comme ci-dessous:

<a 
    href="#" 
    class="track-click" 
    data-tracking='{ 
    "trackers": [ 
     { 
     "tracker": "----", 
     "eventId": "---", 
     "tracking_options": { 
      "eventTargetUrl": "---", 
      "props": [{ 
      "key": "----", 
      "value": "---" 
      }] 
     } 
     } 
    ] 
    }' 
/> 

Le javascript qui gère les demandes de piste devraient être en mesure de recueillir les informations qui réside à l'intérieur de l'attribut de suivi des données. Cela se ferait en attachant un événement click sur l'évènement onClick de la classe "track-click".

Voici comment j'utiliser le lien ci-dessus:

$('.track-click').click(function(e){ 
    //Lets grab the data thats within the data-tracking attribute and do something with it 
    var data = $(this).attr('data-tracking'); 
    alert(data.trackers); 
    e.preventDefault(); 
}); 

A ce moment présent si j'alerter ce qui précède, je me défini. . Si je mets $ (this) .attr («données de suivi) val() sur mon code, je reçois l'erreur ci-dessous:

TypeError: $(...).attr(...).val is not a function 

Quelle est la meilleure façon de manipuler les liens qui ont des données JSON comme montré ci-dessus?

Answer 1

Vous devez utiliser

var data = JSON.parse($(this).attr('data-tracking')); 

Cela vous ramènera l'objet.

Sinon vous devez utiliser

var data = $(this).data('tracking'); 

.data() vous renvoyer l'objet. alors que .attr() va stringifier et retourner cet objet.

DEMO