Making a drop down menu from csv data in JS

Question

Alright, so I'm pretty new at javascript, I'll admit, and I'm sure it's pretty obvious from this post... I know I'm doing something really stupid but I can't place my finger on it.

I'm trying to make a drop down menu display the content from the "Subcategory" column in this csv file I'm working with, but so far all I can get is a drop down list of empty spaces.

What am I doing wrong?

d3.csv("PCC.csv", function(error, data) {

    var select = d3.select("body")
        .append("div")
        .append("select")

    select
        .on("change", function(d) {
            var value = d3.select(this).property("value");
            alert(value);
        });

    select.selectAll("option")
        .data(data)
        .enter()
        .append("option")
        .attr("value", function(d) {
            return d.TPC;
        })
        .text(function(d) {
            return d.Subcategory;
        })

});

Well the data's confidential so I can't just plop it on here, but TPC is a column of numbers and Subcategory is a column of different categories — 7rystan
– 7rystan, Commented Feb 13, 2017 at 16:46
I didn't mean to see the actual data, but how it is formed, an array, an array of objects, how does the object look like... — user4602228
– user4602228, Commented Feb 13, 2017 at 17:02
@7rystan does any answer works ? can you check the grey check under the downvoting arrow to mark as resolved ? — timat
– timat, Commented Feb 16, 2017 at 10:08

Gerardo Furtado · Accepted Answer · 2017-02-14 10:25:36Z

3

Here is a way to create a dropdown using D3 only.

Given your CSV has this structure:

subCategory,TPC
foo,25
bar,19
baz,42

You can bind that data to an enter selection which appends the option. Check the demo:

var body = d3.select("body");
var data = d3.csvParse(d3.select("#csv").text());

var menu = body.append("select");

menu.selectAll("foo")
    .data(data)
    .enter()
    .append("option")
    .attr("value", d=>d.TPC)
    .text(d=>d.subCategory);

menu.on("change", function(){
    console.log(this.value)
});

pre{
  display:none;
  }

<script src="https://d3js.org/d3.v4.min.js"></script>
<pre id="csv">subCategory,TPC
foo,25
bar,19
baz,42</pre>

answered Feb 14, 2017 at 10:25

Gerardo Furtado

102k9 gold badges128 silver badges178 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Gerardo Furtado Over a year ago

Thanks. As a general rule, when using D3, three is no need of any for loop.

timat · Accepted Answer · 2017-02-14 09:39:59Z

2

Ok here is the all example (you just need to edit the path to d3 and the csv data.. The probleme was that the subcategory to fill the combo are not unique, which look weird for me as they are associate to a different value for the same subcategory.

<!DOCTYPE html>
<html>

  <head>


    <title> stack test </title>
    <script type="text/javascript" src="d3/d3.v3.min.js"></script>
        <script type="text/javascript">



     window.onload = function()
        {
        d3.csv("data/PCC-edit.csv",

            function(d) {
                return {

                    TPC: +d.TPC,
                    Subcategory: d.Subcategory

                };  
            },      
            function(data) {
                console.log(data)
                populate_ComboExample(data)
            });
        }

        function populate_ComboExample(data) {

            var example_list= {};
            var example_text= {};
            console.log(data.length)
            for (i=0;i<data.length; i++ ) { // you can calculate the length with js, I choose 10 here for the example
                example_list[i]=data[i].TPC;
                example_text[i]=data[i].Subcategory;
            }


            var select  = document.getElementById("exampleList")

            for (i=0; i < data.length; i++ ) {
                var el = document.createElement("option");
                var temp=example_text[i]
                el.textContent = temp;
                el.value =example_list[i];
                select.appendChild(el);
            }
        }

        function combo_change(thelist) {

            var idx_1 = thelist.selectedIndex;
            alert(thelist.options[idx_1].value);

        }

    </script>


    </head>

    <body>

    <div class="">

    </div>

    <div id="option">

    <form class="comboExample">
    <h4>Subcategory</h4>
    <select name="example_select" id="exampleList" onChange="combo_change(this)">
    </select> 
    </form>


    </div>


</body>

</html>

ps: I use d3 v3, but should work for d3 v4. I would advise you to use "console.log" and check the console, to see what's happening wrong when it does not work.

edited Feb 14, 2017 at 9:39

answered Feb 13, 2017 at 17:56

timat

1,50014 silver badges18 bronze badges

4 Comments

7rystan Over a year ago

I learned a lot from your post, but I'm still having problems. I tried even using your same IDs and so forth but I still get problems. I'm not sure what to replace "nb_example" and "example_list" with, I always get "such and such is not defined".

timat Over a year ago

It would help to have a reproductible example with fake data. 'nb_example' is the nb of row of your array. here I use 10. (I forget to replace it, the best way is to calculate it directly with js though). For example_list, it is again my mistake: I forget var example_list= {}; I updated the post.

7rystan Over a year ago

Oh, it sorta works now! I'm getting NaN though as my options... I have a feeling that's something on my end though? Here, if you want, I uploaded an edited CSV that's similar to the one I'm using, just with made up, desensitized data. dropbox.com/s/24zopp43r3y1ft6/PCC-edit.csv?dl=0

timat Over a year ago

@7rystan I did update with an example which work with you data. it works for me. but you cannot use subcategory as keys (as I did before) since they are not unique..

Collectives™ on Stack Overflow

Making a drop down menu from csv data in JS

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related