json配列が一致するときに線を描く

Question

私は2つのスライダを持っており、ジョブが人に合ったときに線を描きたいと思う。これまでのところ私が持っているものがあります。私は2つが一致したときにどのように線を描くことができるのか分かりません。

<div class="match-line"> 
     <div class="container-fluid"> 
      <div class="row"> 
       <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 

       </div> 
      </div> 
     </div> 

    $('.roles').slick({ 
    slidesToShow: 2, 
    slidesToScroll: 1, 
    autoplay: true, 
    autoplaySpeed: 2000, 
}); 
</script> --> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $('.roles').slick({autoplay:true, slidesToShow: 4,slidesToScroll: 3, autoplaySpeed: 4000,}) 
     $.getJSON("job.JSON", function(data) { 
      $.each(data.jobs, function() { 
       var title = this["title"]; 
       var location = this["location"]; 
       var salary = this["salary"]; 
       var status = this["status"]; 
       $(".roles").slick('slickAdd', 
        "<div class='job'><li><h4 class='title'>"+title+"<h4></li><li><p class='location'>"+location+"<p></li><li><p class='salary'>"+salary+"<p></li><li><p class='position'>"+status+"<p></li></div>" 
        ); 
      }); 
     }); 
    }); 
</script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $('.recruiters').slick({autoplay:true, slidesToShow: 4,slidesToScroll: 3, autoplaySpeed: 4000,}) 
     $.getJSON("recruiter.JSON", function(data) { 
      $.each(data.recruiters, function() { 
       var name = this["name"]; 
       var live_job_count = this["live_job_count"]; 
       var filled_job_count = this["filled_job_count"]; 
       var rating = this["rating"]; 
       $(".recruiters").slick('slickAdd', 
        "<div class='hiring'><li><h4 class='name'>"+name+"<h4></li><li><p class='job-count'>Live Job Count "+live_job_count+"<p></li><li><p class='filled-count'>Jobs Filled "+filled_job_count+"<p></li><li><p class='rating'>Ratings "+rating+"<p></li></div>" 
        ); 
      }); 
     }); 
    }); 

誰かがどのように私が偉大になる線を描くことができるか考えている方は、それらはjson "placed_by"と一致します：751

Answer 1

JSONリクエストが返された後でslick addを実行できます。

$(document).ready(function() { 
    $('#people').slick({slide: 'li'}); 
    $.getJSON("https://example.com/jobs", function(data) { 
     $.each(data.jobs, function() { 
     var title = this["title"]; 
     var location = this["location"]; 
     var salary = this["salary"]; 
     var position = this["position"]; 
     var slide = '<li>' + 
         '<h4 class="title">' + title + '</h4>' + 
         '<div class="details">' + 
         '<p class="location">' + location + '</p>' + 
         '<p class="salary">' + salary + '</p>' + 
         '<p class="status status-hired>' + status + '</p>' + 
         '</div>' + 
         '</li>'; 


     $("#people").slick('slickAdd', slide); 
     }); 
    }); 
});