Start by including a listview in your html markup within the page content:
<ul id="mylist" data-role="listview"></ul>
Then in code, assuming your csv data is actually parsed to:
var data=[
["color","URL","grade","setter","location"],
["color1","URL1","grade1","setter1","location1"],
["color2","URL2","grade2","setter2","location2"]
];
You want to iterate the data skipping the first line which is just column titles (i = 1; i < data.length
), and build a string of the listitem html markup:
var listitems = '';
for (var i = 1; i < data.length; i++){
listitems += '<li><a href="' + data[i][4] +'"><img src="' + data[i][1] +'"><h2>' + data[i][2] +'</h2><p>' + data[i][3] +'</p></a></li>';
}
Finally, append these items to the listview and tell jQM to refresh:
$("#mylist").empty().append(listitems).listview("refresh");
DEMO
NOTE: you will need to adjust the listitem markup to display your data appropriately!
[]
?$.csv.toArrays
. The result looks more like[['color','url','grade'],['color1','url1','grade1']]