복붙노트

[JQUERY] jQuery를에 HTML 테이블에 JSON 배열로 변환

JQUERY

jQuery를에 HTML 테이블에 JSON 배열로 변환

해결법

  1. 1.나는 당신이 원하는하지만,있는 jqGrid가이 있다는 것입니다 있는지 확실하지 않습니다. 그것은 JSON을 받고 그리드를 만들 수 있습니다.

    나는 당신이 원하는하지만,있는 jqGrid가이 있다는 것입니다 있는지 확실하지 않습니다. 그것은 JSON을 받고 그리드를 만들 수 있습니다.

  2. 2.jQuery를 사용하면이 간단 할 것입니다.

    jQuery를 사용하면이 간단 할 것입니다.

    다음 코드는 배열과 행과 세포에 저장 변환 이들의 배열을 취할 것입니다.

    $.getJSON(url , function(data) {
    var tbl_body = "";
    var odd_even = false;
    $.each(data, function() {
        var tbl_row = "";
        $.each(this, function(k , v) {
            tbl_row += "<td>"+v+"</td>";
        });
        tbl_body += "<tr class=\""+( odd_even ? "odd" : "even")+"\">"+tbl_row+"</tr>";
        odd_even = !odd_even;               
    });
    $("#target_table_id tbody").html(tbl_body);
});

    당신은 뭔가를 추가하여 제외 할 키에 대한 검사를 추가 할 수 있습니다

    var expected_keys = { key_1 : true, key_2 : true, key_3 : false, key_4 : true };

    해서 getJSON 콜백 함수와 추가의 시작 :

    if ( ( k in expected_keys ) && expected_keys[k] ) {
...
}

    tbl_row + = 선 주위.

    편집 : 이전에 널 변수를 할당되었다

    편집 : 버전 Timmmm의 주입이없는 기여를 기반으로.

    $.getJSON(url , function(data) {
    var tbl_body = document.createElement("tbody");
    var odd_even = false;
    $.each(data, function() {
        var tbl_row = tbl_body.insertRow();
        tbl_row.className = odd_even ? "odd" : "even";
        $.each(this, function(k , v) {
            var cell = tbl_row.insertCell();
            cell.appendChild(document.createTextNode(v.toString()));
        });        
        odd_even = !odd_even;               
    });
    $("#target_table_id").append(tbl_body);   //DOM table doesn't have .appendChild
});

  3. 3.아래와 같이 $ 연장하여 객체 JSON 배열에서 HTML 테이블 만들기

    아래와 같이 $ 연장하여 객체 JSON 배열에서 HTML 테이블 만들기

    $.makeTable = function (mydata) {
    var table = $('<table border=1>');
    var tblHeader = "<tr>";
    for (var k in mydata[0]) tblHeader += "<th>" + k + "</th>";
    tblHeader += "</tr>";
    $(tblHeader).appendTo(table);
    $.each(mydata, function (index, value) {
        var TableRow = "<tr>";
        $.each(value, function (key, val) {
            TableRow += "<td>" + val + "</td>";
        });
        TableRow += "</tr>";
        $(table).append(TableRow);
    });
    return ($(table));
};

    사용은 다음과 같습니다 :

    var mydata = eval(jdata);
var table = $.makeTable(mydata);
$(table).appendTo("#TableCont");

    어디 TableCont은 일부 사업부는

  4. 4.순수 HTML 방식, 다른 사람처럼 취약하지가 AFAIK :

    순수 HTML 방식, 다른 사람처럼 취약하지가 AFAIK :

    // Function to create a table as a child of el.
// data must be an array of arrays (outer array is rows).
function tableCreate(el, data)
{
    var tbl  = document.createElement("table");
    tbl.style.width  = "70%";

    for (var i = 0; i < data.length; ++i)
    {
        var tr = tbl.insertRow();
        for(var j = 0; j < data[i].length; ++j)
        {
            var td = tr.insertCell();
            td.appendChild(document.createTextNode(data[i][j].toString()));
        }
    }
    el.appendChild(tbl);
}

    사용 예제 :

    $.post("/whatever", { somedata: "test" }, null, "json")
.done(function(data) {
    rows = [];
    for (var i = 0; i < data.Results.length; ++i)
    {
        cells = [];
        cells.push(data.Results[i].A);
        cells.push(data.Results[i].B);
        rows.push(cells);
    }
    tableCreate($("#results")[0], rows);
});

  5. 5.HTML 테이블로 2D 자바 스크립트 배열을 설정하려면, 당신은 정말 필요하지만 코드의 약간 :

    HTML 테이블로 2D 자바 스크립트 배열을 설정하려면, 당신은 정말 필요하지만 코드의 약간 :

    함수 arrayToTable (tableData) { VAR 테이블 = $ ( '<표> '); $ (tableData) .each (함수 (I, 즉 rowData) { VAR 행 = $ ( ' '); $ (즉 rowData) .each (함수 (j, cellData) { row.append ($ ( ''+ cellData + '')); }); table.append (행); }); 테이블을 반환; } $ ( '몸'). APPEND (arrayToTable ([ [ "존", "Slegers"34] [ "톰", "스티븐스", 25], [ "에", "데이비스"28] [ "MIET", "한센"42] [ "엘리", "모리스"18] ])); <스크립트 SRC = "http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">

    당신이 JSON 파일에서 2D 배열을로드하려면, 당신은 또한 Ajax 코드의 약간이 필요합니다 :

    $.ajax({
    type: "GET",
    url: "data.json",
    dataType: 'json',
    success: function (data) {
        $('body').append(arrayToTable(data));
    }
});

  6. 6.아주 고급 JSON은 HTML 테이블에 개체에 대해이 폐쇄 스레드 기반으로 내 jQuery를 해결을 시도 할 수 있습니다.

    아주 고급 JSON은 HTML 테이블에 개체에 대해이 폐쇄 스레드 기반으로 내 jQuery를 해결을 시도 할 수 있습니다.

    var myList=[{"name": "abc","age": 50},{"name": {"1": "piet","2": "jan","3": "klaas"},"age": "25","hobby": "watching tv"},{"name": "xyz","hobby": "programming","subtable": [{"a": "a","b": "b"},{"a": "a","b": "b"}]}];

// Builds the HTML Table out of myList json data from Ivy restful service.
 function buildHtmlTable() {
      addTable(myList, $("#excelDataTable"));
 }

function addTable(list, appendObj) {
    var columns = addAllColumnHeaders(list, appendObj);

    for (var i = 0; i < list.length; i++) {
        var row$ = $('<tr/>');
        for (var colIndex = 0; colIndex < columns.length; colIndex++) {
            var cellValue = list[i][columns[colIndex]];

            if (cellValue == null) {
                cellValue = "";
            }

            if (cellValue.constructor === Array)
            {
                $a = $('<td/>');
                row$.append($a);
                addTable(cellValue, $a);

            } else if (cellValue.constructor === Object)
            {

                var array = $.map(cellValue, function (value, index) {
                    return [value];
                });

                $a = $('<td/>');
                row$.append($a);
                addObject(array, $a);

            } else {
                row$.append($('<td/>').html(cellValue));
            }
        }
        appendObj.append(row$);
    }
}


function addObject(list, appendObj) {
    for (var i = 0; i < list.length; i++) {
        var row$ = $('<tr/>');

        var cellValue = list[i];

        if (cellValue == null) {
            cellValue = "";
        }

        if (cellValue.constructor === Array)
        {
            $a = $('<td/>');
            row$.append($a);
            addTable(cellValue, $a);

        } else if (cellValue.constructor === Object)
        {

            var array = $.map(cellValue, function (value, index) {
                return [value];
            });

            $a = $('<td/>');
            row$.append($a);
            addObject(array, $a);

        } else {
            row$.append($('<td/>').html(cellValue));
        }
        appendObj.append(row$);
    }
}

// Adds a header row to the table and returns the set of columns.
// Need to do union of keys from all records as some records may not contain
// all records
function addAllColumnHeaders(list, appendObj)
{
    var columnSet = [];
    var headerTr$ = $('<tr/>');

    for (var i = 0; i < list.length; i++) {
        var rowHash = list[i];
        for (var key in rowHash) {
            if ($.inArray(key, columnSet) == -1) {
                columnSet.push(key);
                headerTr$.append($('<th/>').html(key));
            }
        }
    }
    appendObj.append(headerTr$);

    return columnSet;
}

  7. 7.당신은 테이블을 채우기 위해 JSON 데이터를 받아들이는 jQuery 플러그인을 사용할 수 있습니다. jsonTable

    당신은 테이블을 채우기 위해 JSON 데이터를 받아들이는 jQuery 플러그인을 사용할 수 있습니다. jsonTable

  8. 8.나는 여기 위에 중복을 발견 : 변환 JSON 데이터를 html로 테이블에

    나는 여기 위에 중복을 발견 : 변환 JSON 데이터를 html로 테이블에

    음, 많은 플러그인 상업 하나를 포함하여, 존재이다 (일종의 과도?! 상업 프로젝트로이 확인 ...하지만 당신은 여기에 체크 아웃 할 수 있습니다 https://github.com/alfajango/jquery-dynatable)

    이 사람은 더 포크가 있습니다 https://github.com/afshinm/Json-to-HTML-Table

    //Example data, Object 
var objectArray = [{
    "Total": "34",
    "Version": "1.0.4",
    "Office": "New York"
}, {
    "Total": "67",
    "Version": "1.1.0",
    "Office": "Paris"
}];

//Example data, Array
var stringArray = ["New York", "Berlin", "Paris", "Marrakech", "Moscow"];

//Example data, nested Object. This data will create nested table also.
var nestedTable = [{
    key1: "val1",
    key2: "val2",
    key3: {
        tableId: "tblIdNested1",
        tableClassName: "clsNested",
        linkText: "Download",
        data: [{
            subkey1: "subval1",
            subkey2: "subval2",
            subkey3: "subval3"
        }]
    }
}];

    코드 적용

    //Only first parameter is required
var jsonHtmlTable = ConvertJsonToTable(objectArray, 'jsonTable', null, 'Download');

    또는 당신은뿐만 아니라이의 jQuery 플러그인을 체크 아웃 할 수 있습니다 : https://github.com/jongha/jquery-jsontotable

    나는 jongha의 플러그인을 사용하기 쉽다는 생각

    <div id="jsontotable" class="jsontotable"></div>

var data = [[1, 2, 3], [1, 2, 3]];
$.jsontotable(data, { id: '#jsontotable', header: false });

  9. 9.다른 jQuery를 따라 도구를 사용하여 받아 들인다면, 나는 태뷸를 사용하는 것이 좋습니다 것입니다. 서식 및 테이블 데이터의 처리에 대한 유연성을 유지하면서 그런 다음, 쓰기 HTML이나 다른 DOM 생성 코드를 필요가 없습니다.

    다른 jQuery를 따라 도구를 사용하여 받아 들인다면, 나는 태뷸를 사용하는 것이 좋습니다 것입니다. 서식 및 테이블 데이터의 처리에 대한 유연성을 유지하면서 그런 다음, 쓰기 HTML이나 다른 DOM 생성 코드를 필요가 없습니다.

    노드를 사용하여 다른 작업 예를 들어, 당신은 MMM-태뷸 데모 프로젝트를 볼 수 있습니다.

  10. 10.순수 jQuery로 :

    순수 jQuery로 :

    window.jQuery.ajax({
    type: "POST",
    url: ajaxUrl,
    contentType: 'application/json',
    success: function (data) {

        var odd_even = false;
        var response = JSON.parse(data);

        var head = "<thead class='thead-inverse'><tr>";
        $.each(response[0], function (k, v) {
            head = head + "<th scope='row'>" + k.toString() + "</th>";
        })
        head = head + "</thead></tr>";
        $(table).append(head);//append header
       var body="<tbody><tr>";
        $.each(response, function () {
            body=body+"<tr>";
            $.each(this, function (k, v) {
                body=body +"<td>"+v.toString()+"</td>";                                        
            }) 
            body=body+"</tr>";               
        })
        body=body +"</tbody>";
        $(table).append(body);//append body
    },
    error: function (xhr, ajaxOptions, thrownError) {
        alert(xhr.responsetext);
    }
});

  11. 11.당신은 다음과 같이 자바 스크립트 + jQuery로 아주 쉽게이 작업을 수행 할 수 있습니다. 일부 열을 제외 할 경우, 단지 루프는 그 열을 건너 뛸 수있는 내부 if 문을 작성합니다. 도움이 되었기를 바랍니다!

    당신은 다음과 같이 자바 스크립트 + jQuery로 아주 쉽게이 작업을 수행 할 수 있습니다. 일부 열을 제외 할 경우, 단지 루프는 그 열을 건너 뛸 수있는 내부 if 문을 작성합니다. 도움이 되었기를 바랍니다!

    // 샘플 JSON 2D 배열 VAR JSON = [{ "총": "34", "버전": "1.0.4" "사무실": "뉴욕" }, { "총": "67", "버전": "1.1.0" "사무실": "파리" }]; // 테이블 헤더 및 인쇄를 가져옵니다 대 (VAR의 K = 0; K '+ Object.keys JSON ([0]) [K] + '.'); } // 테이블 몸과 인쇄를 가져옵니다 위한 VAR (I = 0; I .'); 대 (VAR의 J = 0; J '+ JSON [I] [Object.keys JSON ([0]) [J] + ''); } $ ( '#의 table_content') APPEND ( ". '); } <스크립트 SRC = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> <표>

  12. 12.이 일을 한 가지 간단한 방법은 다음과 같습니다

    이 일을 한 가지 간단한 방법은 다음과 같습니다

    VAR 데이터 = [{ "총"(34) "버전": "1.0.4" "사무실": "뉴욕" }, { "총": 67, "버전": "1.1.0" "사무실": "파리" }]; drawTable (데이터); drawTable 기능 (데이터) { // 테이블 헤더 및 인쇄를 가져옵니다 VAR 헤드 = $ ( "") $ ( "# DataTable을") APPEND (헤드).; 대 (VAR의 J = 0; J "+ Object.keys (데이터 [0]) [J] + "")); } DataTable의 행의 내용을 인쇄 // 경우 (나는 ") $ ( "# DataTable을") APPEND (행).; row.append ($ ( ""+ rowData를 [ "총"] + "")); row.append ($ ( ""+ rowData를 [ "버전"] + "")); row.append ($ ( ""+ rowData를 [ "사무실"] + "")); } 테이블 { 국경 : 1 픽셀의 고체 # 666; 폭 : 100 %; 텍스트 정렬 : 센터; } 일 { 배경 : # f8f8f8; 폰트 중량 : 굵은; 패딩 : 2 픽셀; } <스크립트 SRC = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> <테이블 ID = "DataTable을">

  13. 13.@ Dr.sai의 코드의 비트 코드를 수정. 이 도움이 될 것입니다 바랍니다.

    @ Dr.sai의 코드의 비트 코드를 수정. 이 도움이 될 것입니다 바랍니다.

    (function ($) {
    /**
     * data - array of record
     * hidecolumns, array of fields to hide
     * usage : $("selector").generateTable(json, ['field1', 'field5']);
     */
    'use strict';
    $.fn.generateTable = function (data, hidecolumns) {
        if ($.isArray(data) === false) {
            console.log('Invalid Data');
            return;
        }
        var container = $(this),
            table = $('<table>'),
            tableHead = $('<thead>'),       
            tableBody = $('<tbody>'),       
            tblHeaderRow = $('<tr>');       

        $.each(data, function (index, value) {
            var tableRow = $('<tr>').addClass(index%2 === 0 ? 'even' : 'odd');      
            $.each(value, function (key, val) {
                if (index == 0 && $.inArray(key, hidecolumns) <= -1 ) { 
                    var theaddata = $('<th>').text(key);
                    tblHeaderRow.append(theaddata); 
                }
                if ($.inArray(key, hidecolumns) <= -1 ) { 
                    var tbodydata = $('<td>').text(val);
                    tableRow.append(tbodydata);     
                }
            });
            $(tableBody).append(tableRow);  
        });
        $(tblHeaderRow).appendTo(tableHead);
        tableHead.appendTo(table);      
        tableBody.appendTo(table);
        $(this).append(table);    
        return this;
    };
})(jQuery);

    이 기대가 너무 일부 열을 숨기려면 도움이 될 것입니다. 파일 링크

  14. 14.위의 Dr.sai의 대답 @에 따라 왼쪽 헤더 피벗 단일 행 볼 수 있습니다.

    위의 Dr.sai의 대답 @에 따라 왼쪽 헤더 피벗 단일 행 볼 수 있습니다.

    주입 jQuery의 방법에 의해 억제는 .text

    $.makeTable = function (mydata) {
    var table = $('<table>');
    $.each(mydata, function (index, value) {
        // console.log('index '+index+' value '+value);
        $(table).append($('<tr>'));
        $(table).append($('<th>').text(index));
        $(table).append($('<td>').text(value));
    });
    return ($(table));
};

  15. 15.아직도 짧은 방법

    아직도 짧은 방법

    $.makeTable = function (mydata) {
            if (mydata.length <= 0) return "";
           return $('<table border=1>').append("<tr>" + $.map(mydata[0], function (val, key) {
                return "<th>" + key + "</th>";
            }).join("\n") + "</tr>").append($.map(mydata, function (index, value) {
                return "<tr>" + $.map(index, function (val, key) {
                    return "<td>" + val + "</td>";
                }).join("\n") + "</tr>";
            }).join("\n"));
        };

    16. from https://stackoverflow.com/questions/1051061/convert-json-array-to-an-html-table-in-jquery by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] jQuery.active 기능  (0) 2020.10.06
[JQUERY] 발 ()는하지 jQuery를 트리거의 변화 ()를하지 [중복]  (0) 2020.10.06
[JQUERY] 플러그인 jQuery를 확인 : 지정을 위해 사용하지 않도록 검증 버튼을 제출  (0) 2020.10.06
[JQUERY] 어떻게 자바 스크립트에서 X, Y 좌표를 사용하여 클릭을 시뮬레이션?  (0) 2020.10.06
[JQUERY] 자바 스크립트 : 객체에 대한 필터 ()  (0) 2020.10.06
,

티스토리툴바