Looping javascript obtenir des demandes

Question

J'ai une question javascript 101. J'utilise une belle bibliothèque graphique (flot) et trace plusieurs graphiques sur une seule page. Chaque graphe est un div, avec un ensemble d'attributs qui indique au graphe d'où récupérer ses données. Par exemple, le code HTML peut être:

<div class="line-chart" data-src='/revenue.js'></div> 
<div class="scatter-chart" data-src='/users/byweek.js'></div> 
<div class="scatter-chart2" data-src='/apps/byweek.js'></div> 

Où j'ai deux types de graphiques ici, un nuage de points et une ligne. Idéalement, je serais capable de parcourir les classes et de saisir simplement les données appropriées. Cependant, je suis confus par le contexte de la fonction de rappel, et ne sachant pas quelle div je suis en fait, donc au lieu que je fais ce hack dans mes JS:

$(document).ready(function() { 

    $('.line-chart').each(function() { 
     $.getJSON($(this).attr('data-src'), 
     function(data) { 
      $.plot($('.line-chart'), [data], { xaxis: { mode: "time" }}); 
     }); 
    }); 

    $('.scatter-chart').each(function() { 
     $.getJSON($(this).attr('data-src'), 
     function(data) { 
      $.plot($('.scatter-chart'), [data], { xaxis: { mode: "time" }, 
                lines: { show: false }, 
                points: { show: true } 
      }); 
     }); 
    }); 

    $('.scatter-chart2').each(function() { 
     $.getJSON($(this).attr('data-src'), 
     function(data) { 
      $.plot($('.scatter-chart2'), [data], { xaxis: { mode: "time" }, 
                lines: { show: false }, 
                points: { show: true } 
      }); 
     }); 
    }); 
}); 

Je suis sûr que je peux nettoyer ceci, je ne suis pas clair sur la façon de le faire. Le problème principal est que le $ .plot doit s'appliquer au graphique spécifique contre lequel le getJSON a été appelé, pas le premier qu'il trouve.

Answer 1

Si vous n'êtes pas sûr du contexte du rappel, il sera probablement préférable de ne pas utiliser ce contexte. Vous pouvez utiliser le contexte de la boucle each() à la place:

$('.line-chart').each(function() { 
    var self = $(this); 
    $.getJSON(self.attr('data-src'), 
    function(data) { 
     $.plot(self, [data], { xaxis: { mode: "time" }}); 
    }); 
}); 

Answer 2

$(function() { 

    function plotChart (selector,options) { 
     $(selector).each(function() { 
      var $this = $(this); 
      $.getJSON($this.attr('data-src'), function (data) { 
       $.plot($this, [data], options); 
      }); 
     }); 
    } 

    plotChart('.line-chart', { xaxis: { mode: "time" }); 

    plotChart('.scatter-chart', { xaxis: { mode: "time" }, 
            lines: { show: false }, 
           points: { show: true }); 

    plotChart('.scatter-chart2', { xaxis: { mode: "time" }, 
            lines: { show: false }, 
            points: { show: true }); 

}); 

est tout à fait un peu plus propre.