0

I am trying to find an object in an array that meets specific conditions. I have an array created from a CSV file that gives the following result:

0: {production_company: "Columbia Pictures", Pass: 50, Fail: 65, total: 115}
1: {production_company: "Universal Pictures", Pass: 47, Fail: 65, total: 112}
2: {production_company: "Warner Bros.", Pass: 38, Fail: 74, total: 112}

Then I have a dropdown menu with checkboxes where I check which one was "checked" using jQuery selector and on Change handler. I can get the attribute id so far. In the following code I am using the find method:

        var rowConverter_P = function(d) {
                return {
                        production_company: d.production_company,
                        Pass: parseInt(d.Pass),
                        Fail: parseInt(d.Fail)
               
                };
              }

d3.csv(production_dataset_url, rowConverter_P).then(function(data){

d3.selectAll("input").on("change", function(){

               
                        var paragraphID = d3.select(this).attr("id");
                        console.log("paragraph id", paragraphID); //this works
          
                        if($(this).is(":checked")) {
                               

                       var new_data= data.find(d => d.production_company == paragraphID);
                                console.log("new data: ", new_data);}
}});

my Html code:

<div class="dropdown-menu">
            <button class="dropdown-item" type="button">
             <input type="checkbox" id="Columbia Pictures" checked> Columbia Pictures
             </button>
            <button class="dropdown-item" type="button">
                <input type="checkbox" id="Universal Pictures" checked> Universal Pictures
            </button>
            <button class="dropdown-item" type="button">
                <input type="checkbox" id="Warner Bros." checked> Warner Bros.
            </button>
</div>

The issue here is that I get the variable new_data = Undefined. I thought that maybe because I am comparing two values with different data types, I converted the variable paragraphID to a string as I parse production_company as a string earlier, but still, it is undefined. what am I missing here?

London-35
  • 75
  • 9
  • Are you sure `paragraphID` matches one of the `production_company` names? Try console logging `paragraphID` to check – Scrapper142 May 20 '21 at 18:15
  • I did and it matches it. – London-35 May 20 '21 at 18:19
  • 1
    You only ever want the data associated with checkbox that was changed? Not all checked boxes? Running your code, it appears to work for me otherwise. Also `$(this).is(":checked")` can just be `this.checked` – Andrew Reid May 20 '21 at 18:31
  • I just need the check box that has been changed. My understanding is that on("change, ) works on the changed checkbox even if all the checkboxes are checked by default so it gets the current state of that specific box @AndrewReid – London-35 May 20 '21 at 18:34

1 Answers1

0

I was able to solve this by changing the location of this variable:

var new_data= data.find(data => data.production_company == paragraphID);

I used to call the variable after being removed from the array.

London-35
  • 75
  • 9