0

我想知道如何获取 CSV 文件（包含元素 url、描述、图像 url）并将其解析为数组数组。然后如何在javascript中循环遍历数组并获取每个元素并将其制成一个对象（div类）。该对象将显示在 html 页面上，并包含一个链接、文本描述和显示的图像。

（对不起，我对此很陌生！）

4

2 回答 2

2

同上 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>
于 2013-06-14T01:31:30.377 回答
0

我建议你分解你的问题。您问的是一个包含多个部分的非常通用的问题，而缺少的最大细节（我觉得）是您如何从 CSV -> 数组数组跳转。你是说你想用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>');
}

祝你好运

于 2013-06-13T21:44:43.490 回答