Javascript .CSV文件到CSS元素的数组
我想知道如何获取CSV文件（包含元素url、描述、图像url）并将其解析为数组。然后，如何在javascript中循环遍历数组数组，并将每个元素放入一个对象（div类）。该对象将显示在html页面上，并包含链接、文本描述和显示的图像Javascript .CSV文件到CSS元素的数组,javascript,jquery,html,csv,Javascript,Jquery,Html,Csv,我想知道如何获取CSV文件（包含元素url、描述、图像url）并将其解析为数组。然后，如何在javascript中循环遍历数组数组，并将每个元素放入一个对象（div类）。该对象将显示在html页面上，并包含链接、文本描述和显示的图像 （对不起，我对这一点一无所知！）我建议你把问题细分。你问的是一个包含多个部分的非常一般的问题，缺少的最大细节（我觉得）是如何从CSV->array of array中跳出来的。你是说你想用javascript来完成这一切吗？这是可能的，可能已经有人写过了 另一方面，
（对不起，我对这一点一无所知！）我建议你把问题细分。你问的是一个包含多个部分的非常一般的问题，缺少的最大细节（我觉得）是如何从CSV->array of array中跳出来的。你是说你想用javascript来完成这一切吗？这是可能的，可能已经有人写过了 另一方面，如果你有一个CSV的小列表，也许你最好的办法就是将它们格式化成JSON（你可以用谷歌搜索JSON，应该会弹出很多教程），然后让jQuery自然地将它们读入一个对象中。如果你有很多，也许你应该使用服务器端语言，如PHP、C#、Java或Python或（通过NodeJS的Javascript）来读取CSV并直接将它们打印成HTML。如果你做得好，并且知道如何编程，那么从长远来看，这肯定会更适合你 不管您做什么，我建议您在另一个stackoverflow问题中询问第一部分，该问题更具体，并指出您正在处理的服务器端环境（它可以像一个平面html页面一样简单）。问题的第二部分是如何将数组的数组格式化为HTML元素。以下是一个例子：
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>');
}
var yourOuterArray=[
['something'，'something'，'something']，
[‘某物’、‘某物’、‘某物’]
];
对于（var i=0；i祝你好运关于welegan在上面提到的询问特定问题，也一样 这是一个完整的示例，不需要jQuery或CSV插件。 这比使用jQuery更详细，但没有什么神奇之处，所以希望您能够更好地遵循逻辑 数据文件为movies.csv：
The Matrix,8.7,http://www.imdb.com/title/tt0133093/
Star Wars,8.9,http://www.imdb.com/title/tt0076759/
<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>
加载CSV、解析CSV、生成HTML、添加到DOM-演示
//立即调用的函数表达式-aka“Iffy”
（功能（）{
“严格使用”；
window.onload=loadCSV；
var myArray=[]；
var FILE_NAME=“movies.csv”；
函数loadCSV（）{
//在顶部声明所有变量
var bigString、line、tempArray、tempObject、xhr；
//XHR可以轻松加载本地文件-无需jQuery！
xhr=newXMLHttpRequest（）；
//为加载文件时设置回调函数
xhr.onload=函数（e）{
bigString=e.target.responseText；//或bigString=xhr.responseText
//在回车时使用array.split（）字符串创建记录数组
lines=bigString.split（“\n”）；
//循环浏览记录并用逗号拆分每个记录
行。forEach（函数（行）{
tempArray=line.split（“，”）；
tempObject={}；
tempObject.title=tempArray[0]；
tempObject.rating=tempArray[1]；
tempObject.link=tempArray[2]；
push（tempObject）；
});
//查看你的“电影”对象数组！
log（myArray）；
显示链接（myArray）；
}
//open（方法、路径、异步）；
xhr.open（“GET”，文件名，true）；
xhr.send（）；
};
函数显示链接（数组）{
var html=''；
array.forEach（函数（o）{
html+=“- ”；
html+=''；
html+='
'；
});
html+='
'；
document.body.innerHTML=html；
}
}());