기존 데이터 통합 - 데이터 표준 텍스트 파일 읽기

이 문서는 다음과 같은 문제를 해결 :

첫째, 데이터는 표준 텍스트 파일에서 읽기

1. 읽기 txt 파일

1.1 텍스트 파일에서 데이터를 읽어

1.2 배열로 텍스트 파일의 데이터를 판독하고,리스트로서 출력

1.3 데이터 출력 블록을 경고하기 위해 텍스트 파일 읽기

텍스트 파일에서 1.4 출력 데이터 블록을 경고하는 상태를 확인할 수

CSV 파일을 읽으십시오

2.1 표 객체와 출력으로서 텍스트 파일에 판독 데이터

둘째, XML 데이터의 사용

3. 읽기 X 축 ML의 파일을

3.1 XML 데이터 가져 오기

4. XSLT 스타일 디자인

4.1 XML 데이터 가져 오기 및 변환 및 XSLT 스타일 디자인의 사용

셋째, JSON 데이터 사용

5. JSON 파일 읽기

5.1 직접 액세스 JSON 값

액세스 5.2 JSON.parse () 메소드

액세스 5.3 $ .getJSON () 메소드

5.4 JSON 캔버스 데이터를 그래프로

　　작업의 데이터 시각화 가장 큰 부분은 기존 데이터의 렌더링을 포함한다. 일반 텍스트, CSV, XML, JSON 및 기타 형식을 - - 데이터는 다양한 형식으로 저장할 수 있지만 한 디지털 포맷, 자바 스크립트, 또는 다른 서버 측 루틴 등의 표시이 정보에 액세스 할 수 있습니다. 물론, 어떤 경우에는, 예를 들어, 복잡한 그래프를 생성, 당신은 데이터의 수동 처리가 필요합니다. 그러나, 가능한 경우, 콘텐츠 (데이터) 및 표시 (그래프)의 분리는 것이 좋다.

1. 텍스트 파일 읽기

의 Sample.txt 中

라인 한 
줄 두 
줄 세 
4 번

1.1 텍스트 파일에서 데이터를 읽을에서 read_text.html하기

<!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>

运行结果：

正文结束~~~

기존 데이터 통합 - 데이터 표준 텍스트 파일 읽기

추천