Convert a CSV to JSON with a single AJAX call

Convert CSV to JSON

It seems that almost every website plugin uses JSON as a data input. This works great if you have a JSON stream handy (say, via an API), but will require a conversion step if you only have a CSV or Excel file to work with.

This article will show you how to convert a CSV file to JSON in one step using the Flex.io API.

Try It


Convert a CSV file to JSON


Enter the URL of the CSV file you'd like to convert to JSON:


Set up the Flex.io Pipe


We set up a very simple pipe using Flex.io that has only two steps.

  1. File Input

    This step will import a file from the web that we will specify when we run the pipe:

    input file: ${url}
    

    NOTE: In this step, ${url} is a pipe variable. Pipe variables are very powerful and allow things to be configured in the pipe at runtime. When we POST to this pipe, we need to include a variable with a key value of url in the POST parameters which will be the URL of the CSV file we want to convert.

  2. Convert from CSV to JSON

    This step will convert the CSV file to JSON. To do this, we simply use a convert command:

    convert from: delimited to: json
    

Create a basic HTML form to submit the URL to the Flex.io API


Here’s the very basic HTML form and output markup we created (if you’re wondering about the classes on the elements, we’re using the Tachyons CSS toolkit):

<form class="flex flex-row">
  <input type="url" name="url" value="http://www.google.com/finance/historical?q=AMZN&output=csv" id="input-csv-file" class="flex-fill input-reset lh-copy pa2 bt bb bl b--black-20 focus-b--blue" spellcheck="false">
  <button type="button" id="btn-get-json" class="b ttu border-box no-select pv2 ph3 br1 br--right white bg-blue b--blue darken-10">Get JSON</button>
</form>
<pre id="json-result" class="dn pa2 bl br bb b--black-20 bg-white lh-title overflow-auto" style="font-size: 12px; max-height: 400px"></pre>

To call this pipe from your code, all that is needed to get JSON from the CSV file is a simple AJAX call to Flex.io:

$.ajax({
  type: 'POST',
  url: 'https://www.flex.io/api/v1/pipes/csv-to-json/run?stream=0',
  data: $('form').serialize(),
  dataType: 'json',
  success: function(content) {
    // grab the result of the pipe from Flex.io and format the JSON for display
    var formatted_json = JSON.stringify(content, null, 2)
    $('#json-result').text(formatted_json)
  }
})

Get started with Flex.io


Using the Flex.io API to do the dirty work of grabbing a CSV file and converting it to JSON is simple and allows you to get your data into the format you know and love most for your front-end development — once the data is in JSON, have at it with either Lodash or Underscore.js to slice and dice your JSON. :-)

We hope you’ve enjoyed this quick example of the Flex.io API and find it useful.

Get started with Flex.io