Read variables from a file in Javascript

Question

I have a variable called words in Javascript like this:

var words = [{"text":"This", "url":"http://google.com/"},
         {"text":"is", "url":"http://bing.com/"},
         {"text":"some", "url":"http://somewhere.com/"},
         {"text":"random", "url":"http://random.org/"},
         {"text":"text", "url":"http://text.com/"},
         {"text":"InCoMobi", "url":"http://incomobi.com/"},
         {"text":"Yahoo", "url":"http://yahoo.com/"},
         {"text":"Minutify", "url":"http://minutify.com/"}]

and I use the variable elements as for example words[0].url which points to the first url, ie http://google.com/ , etc.

If I store the data in a file like this (I call it file.csv):

This, http://google.com/
is, http://bing.com/
some, http://somewhere.com/
random, http://random.org/
text, http://text.com/
InCoMobi, http://incomobi.com/
Yahoo, http://yahoo.com/
Minutify, http://minutify.com/   

How can I read the file in Javascrip and re-create variable words , with the exact same format as I mentioned earlier, ie re-create:

var words = [{"text":"This", "url":"http://google.com/"},
         {"text":"is", "url":"http://bing.com/"},
         {"text":"some", "url":"http://somewhere.com/"},
         {"text":"random", "url":"http://random.org/"},
         {"text":"text", "url":"http://text.com/"},
         {"text":"InCoMobi", "url":"http://incomobi.com/"},
         {"text":"Yahoo", "url":"http://yahoo.com/"},
         {"text":"Minutify", "url":"http://minutify.com/"}]

Answer 1

It looks like there are two steps. First is to get the external file, and the next step is to get it into a format you want it.

If you're not using jquery, first step is:

var file = new XMLHttpRequest();

file.onload = function() {
  alert(file.responseText);

}

file.open('GET', 'file.csv');
file.send();

Next step is to take that file.responseText and format it. I might do:

var file = new XMLHttpRequest();
var words = [];


file.onload = function() {

   var lines = file.responseText.split("\n");

    for (var i = 0; i < lines.length; i++) {
        var word = {};
        var attributes = lines[i].split(",");
        word.text = attributes[0];
        word.url = attributes[1];
        words.push(word);
    }

}

file.open('GET', 'file.csv');
file.send();

If you're using a JSON file, just change the function above to be:

file.onload = function() {
    words = JSON.parse(file.responseText);
}

Keep in mind that the words variable will not be available until the onload function runs, so you should probably send it to another function that uses it.

Answer 2

You could use the fetch API , it has many advantages and one of them is very short syntax, unlike the XMLHttpRequest constructor.

 fetch("object.json").then(function(data){window.data=data.json()}); //then access the data via [window.data]