I was wondering how I can take a CSV file(containing elements url, description, image url) and parse it into an array of arrays. Then how to loop through the array of arrays in javascript and take each element and make it into an object (div class). The object will be displayed on the html page and will contain a link, the description in text, and the image displayed.
(sorry, I'm brand new to this!)
Ditto on what welegan said above about asking specific questions.
Here's a complete example, no jQuery or CSV plugins needed. This is more verbose then using jQuery, but there's no magic, so hopefully you can follow the logic better.
The data file is movies.csv:
The Matrix,8.7,http://www.imdb.com/title/tt0133093/
Star Wars,8.9,http://www.imdb.com/title/tt0076759/
The code:
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Load CSV, Parse CSV, Make HTML, Add to DOM - Demo</title>
<script>
// immediately invoked function expression - aka "Iffy"
(function(){
"use strict";
window.onload = loadCSV;
var myArray = [];
var FILE_NAME = "movies.csv";
function loadCSV(){
// declare all our variables at the top
var bigString, lines, tempArray, tempObject, xhr;
// XHR can load local files easily - no jQuery needed!
xhr = new XMLHttpRequest();
// set up callback function for when file is loaded
xhr.onload = function(e){
bigString = e.target.responseText; // or bigString = xhr.responseText
// array.split() string on carriage return to create an array of records
lines = bigString.split("\n");
// loop through records and split each on commas
lines.forEach(function(line){
tempArray = line.split(",");
tempObject = {};
tempObject.title = tempArray[0];
tempObject.rating = tempArray[1];
tempObject.link = tempArray[2];
myArray.push(tempObject);
});
// check out your array of "movie" objects!
console.log(myArray);
displayLinks(myArray);
}
//xhr.open(method, path, asynch);
xhr.open("GET", FILE_NAME, true);
xhr.send();
};
function displayLinks(array){
var html = '<ul>';
array.forEach(function(o){
html += '<li>';
html += '<a href="';
html += o.link;
html += '">';
html += o.title;
html += ' - rating = ';
html += o.rating;
html += '</a>';
html += '</li>';
});
html += '</ul>';
document.body.innerHTML = html;
}
}());
</script>
</head>
<body>
</body>
</html>
I recommend you break down your question. You are asking a very general one with several parts, and the biggest detail that is missing (I feel like) is how you made the jump from CSV -> array of arrays. Are you saying that you want to do it all in javascript? That is possible, someone probably has already written it.
On the other hand, if you have a small list of CSV's, perhaps your best bet is to just format them into JSON (you can google JSON and plenty of tutorials should pop up) and let jQuery read those into an object naturally. If you have a lot of them, maybe you should be using a server-side language like PHP, C#, Java, or Python or (Javascript via NodeJS) to read the CSV and print them to HTML directly that way. That will certainly scale better for you in the long run if you do it right and know how to program.
Regardless of what you do, I'd recommend asking the first part in another stackoverflow question that is more specific and indicates what server side environment you're dealing with (it could be as simple as a flat html page). The second part of your question is how to format arrays of arrays into HTML elements. Here is an example for that:
var yourOuterArray = [
['something', 'something', 'something'],
['something', 'something', 'something']
];
for(var i = 0; i < yourOuterArray.length; i++)
{
$('body').append('<div class="' + yourOuterArray[i][0] +
'"><img src="' + yourOuterArray[i][1] + '" alt="' +
yourOuterArray[i][2] + '"></div>');
}
Good luck
