Integrate existing data - Data read from the standard text file

This document addresses the following issues:

First, data is read from the standard text file

1. Read txt file

1.1 to read data from a text file

1.2 The data in the text file into an array is read, and output as a list

1.3 Data read from the text file to alert output block

1.4 from the text file to read data and status to alert output block

2. Read CSV file

2.1 The data read into the text file as a table object and outputs

Second, the use of XML data

3. Read the X- ML file

3.1 xml data import

4. Use XSLT style design

4.1 XML data import and conversion, and the use of XSLT style design

Third, the use of JSON data

5. Read the JSON file

5.1 Direct access JSON value

5.2 JSON.parse () method to access

5.3 $ .getJSON () method to access

5.4 JSON canvas data graphed

　　Data visualization largest part of the work involves the rendering of the existing data. Data can be stored in many different formats - plain text, CSV, XML, JSON and other formats - but as long as the digital format, JavaScript, or other server-side routine and may access this information for display. Of course, in some cases, for example, build complex graph, you will require manual processing of data. However, where possible, the content (data) and display (chart) separation is a good idea.

1. Read a text file

sample.txt中

Line one
Line two
Line three
Line four

1.1 to read data from a text file, read_text.html in

<!doctype html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>从文本文件中读取数据</title>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>

    <body>
        <h1>Get data from text file</h1>
        <div>
            <p id="fileData"></p>
        </div>
    </body>
    <script>
        $(document).ready(function() {
            //$.get()是jQuery.get(),参考文档 https://api.jquery.com/jquery.get/
            $.get('sample.txt', function(theData) {
                $('#fileData').html(theData.replace(/\n/g, '<br>'));
            });
        });
    </script>

</html>

运行结果

1.2 将文本文件中的数据读入数组，并作为列表输出，read_text_into_list.html中，

<!doctype html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>Read Data from Text File into Array and Output as List</title>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>

    <body>
        <h1>Put data from text file into array and output as list</h1>
        <div>
            <ul id="fileData">
            </ul>
        </div>
    </body>
    <script>
        $(document).ready(function() {
            $.get('sample.txt', function(theData) {
                theItems = theData.split('\n');
                var theList = '';
                var theListItem;
                for(i = 0; i < theItems.length; i++) {
                    theListItem = '<li>' + theItems[i] + '</li>';
                    theList = theList + theListItem;
                };
                $('#fileData').html(theList);
            });
        });
    </script>

</html>

运行结果：

1.3 从文本文件中的读取数据，以警告框输出，alert_data.html中，

<!doctype html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>Alert Data from Text File</title>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>

    <body>
        <h1>Alert data from text file</h1>
        <div>
            <p id="fileData"></p>
        </div>
    </body>
    <script>
        $(document).ready(function() {
            jQuery.get('sample.txt', function(theData) {
                alert(theData);
            });
        });
    </script>

</html>

运行结果：

1.4从文本文件中的读取数据和状态，以警告框输出，alert_data_status.html中，

<!doctype html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>Alert Data and Status from Text File</title>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>

    <body>
        <h1>Alert data and status from text file</h1>
        <div>
            <p id="fileData"></p>
        </div>
    </body>
    <script>
        $(document).ready(function() {
            jQuery.get('sample.txt', function(theData, theStatus) {
                alert(theData + "\nStatus: " + theStatus);
            });
        });
    </script>

</html>

运行结果：

2.读取CSV文件

　　尽管我们可存储和获取文本文件中简单的非结构化数据，但更常见的是使用CSV文件。

CSV文件的数据格式通常为：每行是一条记录，每条记录又可以包含许多列。每个数据列中的值通常有逗号分开。

stores.csv中，

文本编辑器打开

exce编辑器打开

2.1 将文本文件中的数据读入对象并作为表输出，read_csv_into_array.html中

<!doctype html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>Read Data from Text File into Objects and Output as Table</title>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
       <!--引入jquery-csv库，其中包括各种解析CSV文件以及设置分隔符等的方法    -->
        <script src="https://cdn.bootcss.com/jquery-csv/1.0.4/jquery.csv.min.js"></script>
        
        
        <body>
            <h1>Pull data from CSV file into an object and output as table</h1>
            <div class="result">
                <table id="theResult" border="1"></table>
            </div>
        </body>
        <script>
            $(document).ready(function() {
                //使用$.get()方法导入和解析CSV文件
                $.get('stores.csv', function(theData) {
                    //$.csv.toObjects()将CSV数据转换为一个名为data的对象
                    var data = $.csv.toObjects(theData);
                    var theHtml = createTable(data);
                    $('#theResult').html(theHtml);
                });
            });
            
            //自定义函数createTable(data)，将遍历数据的第一行泪提取csv的列名，并将它们输出到表中
            function createTable(data) {
                var html = '';

                if(data[0].constructor === Object) {
                    html += '<tr>\r\n';
                    for(var item in data[0]) {
                        html += '<th>' + item + '</th>\r\n';
                    }
                    html += '</tr>\r\n';

                    for(var row in data) {
                        html += '<tr>\r\n';
                        for(var item in data[row]) {
                            html += '<td>' + data[row][item] + '</td>\r\n';
                        }
                        html += '</tr>\r\n';
                    }
                }
                return html;
            }
        </script>

</html>

运行结果：

正文结束~~~

Integrate existing data - Data read from the standard text file

Guess you like