troubleshooting Question

Javascript/JQuery- Match string in dropdown to string in JSON and display the JSON sibling's array

Avatar of Dawn
Dawn asked on
JavaScriptjQueryJSON* D3.js
10 Comments2 Solutions103 ViewsLast Modified:
I'm attempting to display part of an array from JSON when the user clicks on an ID in the dropdown. The data is loading data twice and then subsequent clicks just layer array upon array even though I have set my array to clear when update() is fired. I'm also getting a "update is not defined at HTMLAnchorElement.onclick" although that function itself is firing when the page loads.

How can I resolve the error and only display the one set of matching data? Here is a fiddle: https://jsfiddle.net/dtepdc/4e6mfoct/

Here is the code:

let dataset = [
    {
        "scene": "IR0006426320",
        "scene_start_time": "2018-02-05T15:03:30",
        "chips": [
        {
            "chip": "2018.02.05.150",
            "start_date": "2018-02-05T00:05:07",
            "end_date": "2018-02-05T01:26:23",
            "co_num":["None"],
            "cause": false
        },
        {
            "chip": "2018.02.05.192",
            "start_date": "2018-02-05T15:48:08",
            "end_date": "2018-02-05T17:22:34",
            "co_num": [
                "C03619354",
                "C03618763",
                "C03619064",
                "C03619325"
            ],
            "cause": false
        },
        {
            "chip": "2018.02.05.26",
            "start_date": "2018-02-05T16:38:56",
            "end_date": "2018-02-05T21:08:00",
            "co_num": [
                "C03610724"
            ],
            "cause": false
        },
        {
            "chip": "2018.02.05.303",
            "start_date": "2018-02-05T13:34:58",
            "end_date": "2018-02-05T13:34:58",
            "co_num": [
                "C03610724"
            ],
            "cause": true
        },
        {
            "chip": "2018.02.05.44",
            "start_date": "2018-02-05T21:20:39",
            "end_date": "2018-02-05T23:41:59",
            "co_num": [
                "C03610724"
            ],
            "cause": false
        },
        {
            "chip": "2018.02.05.53",
            "start_date": "2018-02-05T13:59:46",
            "end_date": "2018-02-05T16:01:35",
            "co_num": [
                "C03610724"
            ],
            "cause": true
        },
        {
            "chip": "2018.02.05.54",
            "start_date": "2018-02-05T01:04:53",
            "end_date": "2018-02-05T01:09:58",
            "co_num":["None"],
            "cause": false
        },
        {
            "chip": "2018.02.06.63",
            "start_date": "2018-02-05T23:44:23",
            "end_date": "2018-02-05T23:59:18",
            "co_num": [
                "C03610724"
            ],
            "cause": false
        }
    ]
},
{
    "scene": "IR0006633836",
    "scene_start_time": "2018-05-2418T14:20:00",
    "chips": [
        {
            "chip": "2018.05.25.50",
            "start_date": "2018-05-24T02:10:04",
            "end_date": "2018-05-24T06:39:41",
            "co_num": [
                "C03726697", "None"
            ],
            "cause": false
        },
        {
            "chip": "2018.05.25.59",
            "start_date": "2018-05-24T03:02:01",
            "end_date": "2018-05-24T04:26:06",
            "co_num": [
                "C03728974",
                "C03729029",
                "C03704816",
                "C03728657",
                "C03719067"
            ],
            "cause": false
        },
        {
            "chip": "2018.05.26.137",
            "start_date": "2018-05-24T18:02:47",
            "end_date": "2018-05-24T18:43:10",
            "co_num":["None"],
            "cause": false
        },
        {
            "chip": "2018.05.26.194",
            "start_date": "2018-05-24T15:08:40",
            "end_date": "2018-05-24T15:10:40",
            "co_num":["None"],
            "cause": false
        },
        {
            "chip": "2018.05.26.197",
            "start_date": "2018-05-24T18:20:53",
            "end_date": "2018-05-24T18:20:53",
            "co_num": [
                "C03726648"
            ],
            "cause": false
        },
        {
            "chip": "2018.05.26.269",
            "start_date": "2018-05-24T21:07:35",
            "end_date": "2018-05-24T21:08:48",
            "co_num": [
                "C03726648"
            ],
            "cause": false
        },
        {
            "chip": "2018.05.26.30",
            "start_date": "2018-05-24T14:20:17",
            "end_date": "2018-05-24T21:14:25",
            "co_num":[
                "C03704816",
                "C03719067",
                "C03728657"
            ],
            "cause": false
        },
        {
            "chip": "2018.05.26.31",
            "start_date": "2018-05-24T15:19:35",
            "end_date": "2018-05-24T17:33:52",
            "co_num": [
                "C03704816",
                "C03719067",
                "C03728657", "None"
            ],
            "cause": false
        },
        {
            "chip": "2018.05.26.377",
            "start_date": "2018-05-24T14:59:08",
            "end_date": "2018-05-24T15:25:06",
            "co_num": [
                "C03730107",
                "C03714722",
                "C03728407",
                "C03728209"
            ],
            "cause": false
        },
        {
            "chip": "2018.05.26.39",
            "start_date": "2018-05-24T18:13:52",
            "end_date": "2018-05-24T18:13:53",
            "co_num": [
                "C03728284"
            ],
            "cause": false
        }
    ]
}
]
        $.each(dataset, function (i) {
            $('#dropdownMenuButtonAnchor').append('<a class="dropdown-item" onclick="update()" href="#">' + dataset[i].scene  + '</a>');
    });

            $.each(dataset, function (j) {
            let firstIncident = dataset[0].scene;
            $("#incidentNumber").html(firstIncident);

        });


setTimeout(function() {
    update();
}, 100);

  /* change() ********************* */
  function update() {
    d3.selectAll('svg').remove();
    let changed = [];
    let start = moment().subtract(24, 'months').valueOf();
    let timeRange =     d3.select('input[name="options"]:checked').property("value");

if (timeRange < 12) {
    start = moment().subtract(timeRange, 'minutes').valueOf();
} else if (timeRange >= 12 && timeRange < 36) {
    start = moment().subtract(timeRange, 'hours').valueOf();
} else if (timeRange === 24) {
    start = moment().subtract(16, 'months').valueOf();
}

let end = moment().valueOf();

const coNumW = window.innerWidth,
        coNumH = window.innerHeight,
        margin = {top: coNumH * 0.15, right: coNumW * 0.05, bottom: coNumH * 0.12, left: coNumW * 0.12},
        w = coNumW - margin.left - margin.right,
        h = coNumH - margin.top - margin.bottom;

let x = d3.scaleTime().range([w, 0]),
    y = d3.scaleBand().range([h, 0]),
    xAxis = d3.axisBottom(x)
    yAxis = d3.axisLeft(y),
    filtered = [],
    dateFormat = d3.timeFormat("%Y-%m-%d %I:%M %p"),
    weekdayFormat = d3.timeFormat("%w");

    let newSvg = d3.select("body")
    .append("svg")
    .attr("width", coNumW)
    .attr("height", coNumH)
    .append("g").classed("no-select", true)
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// ********************************************* LOOPS *********************************************
   $('div#dropdownMenuButtonAnchor a').click(function(){

    let incident = $(this).text();
    $("#incidentNumber").html(incident);

            //dataset.forEach(function(d, i) {
                for (let i = 0;i < dataset.length;i++){
                    if (incident === dataset[i].scene) {
                        dataset[i].chips.forEach(function(c, j) {
                            changed.push(c);

                            $('.incidentInfo').append('<a class="dropdown-item" onclick="update()" href="#">' + c.co_num  + '</a>');

                          });


// ********************************************* LOOPS *********************************************

x.domain([new Date(start), new Date(end)]).range([0, w]);
y.domain(changed.map(d => d.chip)).padding(0.1);

newSvg.append("g")
        .attr("class", "x_Axis")
        .attr("transform", "translate(0, " + h + ")")
        .call(xAxis)

newSvg.append("g")
        .attr("class", "y_Axis")
        .call(yAxis);

let tasksChange = newSvg.append("g")
        .attr("class", "dataCont")
        .selectAll("g")
        .data(changed)
        .enter()
        .append("g")
        .on("mouseenter", showData);

    let parseDate = d3.timeParse('%Y-%m-%dT%H:%m:%s');
    tasksChange.append("rect")
            .attr("x", function(d) {
                return x(moment(d.start_date).valueOf()) + 2;
            })
            .attr("y", function(d) {
            return y(d.chip);
            })
            .attr("width", function(d) {
                return x(moment(d.end_date)) - x(moment(d.start_date)) +2;
            })
            .attr("height", function(d) {
                return y.bandwidth();
            });


            d3.selectAll("#inlineRadio2, #inlineRadio3, #inlineRadio4")
                .on("change", function(){
                    update();
            });

            d3.selectAll("#inlineRadio1")
                .on("change", function(){
                setInterval(update, 10);
                var svg = d3.select("svg");

                let start = moment().subtract(timeRange, 'minutes').valueOf();
                let end = moment().valueOf();

                x.domain([start, end]);
                xAxis.scale(x);

                    //move the xaxis left
                svg.select(".x_axis")
                  .transition()
                  .duration(100)
                  .ease(d3.easeLinear)
                  .call(xAxis);
              });


    function showData(d) {
        console.log("Start Date: " + moment(d.start_date).format());
        console.log("End Date: " + moment(d.end_date).format());
        console.log('CO: ', d.chip)
        console.log('************************* ')

    }
}
}
});
  }
ASKER CERTIFIED SOLUTION
Join our community to see this answer!
Unlock 2 Answers and 10 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 2 Answers and 10 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros