How convert tsv to Json

Question

I want to make a dynamic graph based on a json file. I have seen many examples with tsv but I donot how to convert it to json. That is the part that I want to change from tsv to json but I donot know how!

d3.tsv("data/data.tsv", function(error, data) {
  data.forEach(function(d) {
    d.date = parseDate(d.date);
    d.close = +d.close;
  });

when I use

d3.json("data/data.json", function(data) {
    data.forEach(function d) { 
        d.date = parseDate(d.date);
        d.close = +d.close;
    }

});

it gives this error: Uncaught type error: cannot call method 'forEach' of undefined!

Thanks for your suggestions :)

Answer 1

try to do something like this

d3.json("data/data.json", function(data) {
    data.forEach(function d) { 
        d.date = parseDate(d.date);
        d.close = +d.close;
    }
});

d3.js have support for json, https://github.com/mbostock/d3/wiki/Requests

Answer 2

The syntax around your forEach is a little off; try this instead:

d3.json("data/data.json", function(data) {
    data.forEach(function(d) { 
        d.date = parseDate(d.date);
        d.close = +d.close;
    });
});

(As Felix points out, this will only work if your JSON object is defined and is an array)

Answer 3

Here a small code where you'll be able to convert tsv to json. It could help you...

ps : here is typescript, but you can easily convert it to vanilla javascript ;)

// Set bunch of datas into format object
tsvToJson(datas: string): Array<Object>{
    // Separate each lines
    let array_datas = datas.split(/\r\n|\r|\n/g);

    // Separate each values into each lines
    var detailed_datas = [];
    for(var i = 0; i < array_datas.length; i++){
        detailed_datas.push(array_datas[i].split("\t"));
    }

    // Create index
    var index = [];
    var last_index = ""; // If the index we're reading is equal to "", it mean it might be an array so we take the last index
    for(var i = 0; i < detailed_datas[0].length; i++){
        if(detailed_datas[0][i] == "") index.push(last_index);
        else {
            index.push(detailed_datas[0][i]);
            last_index = detailed_datas[0][i];
        }
    }

    // Separate data from index
    detailed_datas.splice(0, 1);

    // Format data
    var formated_datas = [];
    for(var i = 0; i < detailed_datas.length; i++){
        var row = {};
        for(var j = 0; j < detailed_datas[i].length; j++){
            // Check if value is empty
            if(detailed_datas[i][j] != ""){
                if(typeof row[index[j]] == "object"){
                    // it's already set as an array
                    row[index[j]].push(detailed_datas[i][j]);
                } else if(row[index[j]] != undefined){
                    // Already have a value, so it might be an array
                    row[index[j]] = [row[index[j]], detailed_datas[i][j]];
                } else {
                    // It's empty for now, so let's say first that it's a string
                    row[index[j]] = detailed_datas[i][j];
                }
            }
        }
        formated_datas.push(row);
    }
    console.log(formated_datas); // @TODO : remove this
    return formated_datas;
}

Answer 4

I transpile and resume Wetteren's code:

convertTSVtoJSON(tsvData) {
    const formattedData = tsvData.split(/\r\n|\r|\n/g).filter(e => !!e).map((parsedEntry) => parsedEntry.split("\t"));
    const tsvHeaders = formattedData.shift();

    return formattedData.map(formattedEntry => {
        {
            return tsvHeaders.reduce((jsonObject, heading, position) => {
                jsonObject[heading] = formattedEntry[position];
                return jsonObject;
            }, {});
        }
    });
}