복붙노트

[JQUERY] 구문 분석 JSON은 HTML 테이블에 대한 객체

JQUERY

구문 분석 JSON은 HTML 테이블에 대한 객체

해결법

  1. 1.루프는 각 개체 이상, 관련 데이터가 반복 될 때마다 테이블 행을 추가.

    루프는 각 개체 이상, 관련 데이터가 반복 될 때마다 테이블 행을 추가.

    $(document).ready(function () {
    $.getJSON(url,
    function (json) {
        var tr;
        for (var i = 0; i < json.length; i++) {
            tr = $('<tr/>');
            tr.append("<td>" + json[i].User_Name + "</td>");
            tr.append("<td>" + json[i].score + "</td>");
            tr.append("<td>" + json[i].team + "</td>");
            $('table').append(tr);
        }
    });
});

    JSFiddle

  2. 2.당신은 간단한 jQuery를 jPut 플러그인을 사용할 수 있습니다

    당신은 간단한 jQuery를 jPut 플러그인을 사용할 수 있습니다

    http://plugins.jquery.com/jput/

    <script>
$(document).ready(function(){

var json = [{"name": "name1","score":"30"},{"name": "name2","score":"50"}];
//while running this code the template will be appended in your div with json data
$("#tbody").jPut({
    jsonData:json,
    //ajax_url:"youfile.json",  if you want to call from a json file
    name:"tbody_template",
});

});
</script>   

<div jput="tbody_template">
 <tr>
  <td>{{name}}</td>
  <td>{{score}}</td>
 </tr>
</div>

<table>
 <tbody id="tbody">
 </tbody>
</table>

  3. 3.각 개체 이상의 루프, 문자열 배열에 밀어 그들과 합류. 추가] 목표 테이블에, 그것은 더 좋다.

    각 개체 이상의 루프, 문자열 배열에 밀어 그들과 합류. 추가] 목표 테이블에, 그것은 더 좋다.

    $(document).ready(function () {
$.getJSON(url,
function (json) {
    var tr=[];
    for (var i = 0; i < json.length; i++) {
        tr.push('<tr>');
        tr.push("<td>" + json[i].User_Name + "</td>");
        tr.push("<td>" + json[i].score + "</td>");
        tr.push("<td>" + json[i].team + "</td>");
        tr.push('</tr>');
    }
    $('table').append($(tr.join('')));
});

  4. 4.당신은 jQuery를 함께 KnockoutJS를 사용할 수 있습니다. KnockoutJS 스마트 데이터 바인딩 기능을 가지고 있습니다. foreach는 바인딩 기능을 사용하여이 예와 같이 코드를 작성할 수 있습니다 :

    당신은 jQuery를 함께 KnockoutJS를 사용할 수 있습니다. KnockoutJS 스마트 데이터 바인딩 기능을 가지고 있습니다. foreach는 바인딩 기능을 사용하여이 예와 같이 코드를 작성할 수 있습니다 :

    HTML :

    <table>
    <thead>
        <tr>
            <th>User Name</th>
            <th>Score</th>
            <th>Team</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: teams">
        <tr>
            <td data-bind="text: User_Name"></td>
            <td data-bind="text: score "></td>
            <td data-bind="text: team "></td>
        </tr>
    </tbody>
</table>

    자바 스크립트 :

    $(document).ready(function () {
        $.getJSON(url,function (json) {
               ko.applyBindings({
                  teams: json
               });
          }
        });

    });

    당신의 더미 데이터와 바이올린 데모

  5. 5.아래와 같이 $ 연장하여 객체 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은 일부 사업부는

  6. 6.또 다른 좋은 재귀 방법은 (현재 배열을 지원하지 않는) 중첩 된 JSON 객체로부터 HTML을 생성합니다 :

    또 다른 좋은 재귀 방법은 (현재 배열을 지원하지 않는) 중첩 된 JSON 객체로부터 HTML을 생성합니다 :

    // generate HTML code for an object
var make_table = function(json, css_class='tbl_calss', tabs=1){
    // helper to tabulate the HTML tags. will return '\t\t\t' for num_of_tabs=3
    var tab = function(num_of_tabs){
        var s = '';
        for (var i=0; i<num_of_tabs; i++){
            s += '\t';
        }
        //console.log('tabbing done. tabs=' + tabs)
        return s;
    }
    // recursive function that returns a fixed block of <td>......</td>.
    var generate_td = function(json){ 
        if (!(typeof(json) == 'object')){
            // for primitive data - direct wrap in <td>...</td>
            return tab(tabs) + '<td>'+json+'</td>\n';
        }else{
            // recursive call for objects to open a new sub-table inside the <td>...</td>
            // (object[key] may be also an object)
            var s = tab(++tabs)+'<td>\n';
            s +=        tab(++tabs)+'<table class="'+css_class+'">\n';
            for (var k in json){
                s +=        tab(++tabs)+'<tr>\n';
                s +=          tab(++tabs)+'<td>' + k + '</td>\n';
                s +=                      generate_td(json[k]);
                s +=        tab(--tabs)+'</tr>' + tab(--tabs) + '\n';


            }
            // close the <td>...</td> external block
            s +=        tab(tabs--)+'</table>\n';
            s +=    tab(tabs--)+'</td>\n';
            return s;
        }
    }
    // construct the complete HTML code
    var html_code = '' ;
    html_code += tab(++tabs)+'<table class="'+css_class+'">\n';
    html_code +=   tab(++tabs)+'<tr>\n';
    html_code +=     generate_td(json);
    html_code +=   tab(tabs--)+'</tr>\n';
    html_code += tab(tabs--)+'</table>\n';
    return html_code;
}

  7. 7.이 사람은 추한이지만, 그냥 믹스에 몇 가지 다른 옵션을 던지고 싶다. 이 사람은 더 루프가 없습니다. 내가 디버깅 목적을 위해 사용

    이 사람은 추한이지만, 그냥 믹스에 몇 가지 다른 옵션을 던지고 싶다. 이 사람은 더 루프가 없습니다. 내가 디버깅 목적을 위해 사용

    var myObject = {a:1,b:2,c:3,d:{a:1,b:2,c:3,e:{a:1}}}
var myStrObj = JSON.stringify(myObject)
var myHtmlTableObj = myStrObj.replace(/{/g,"<table><tr><td>").replace(/:/g,"</td><td>","g").replace(/,/g,"</td></tr><tr><td>","g").replace(/}/g,"</table>")

$('#myDiv').html(myHtmlTableObj)

    예:

    VAR 인 myObject = {A : 1, B 2, C 3 D : {A : 1, B 2, C : 3, E {A : 1}}} VAR myStrObj = JSON.stringify (인 myObject) VAR myHtmlTableObj = myStrObj.replace (/ \ "/ g," ") 교체 (/ {/ g '<표> ") 교체 (/ :.. / g " < TD> ","g "). 교체 (/, / g" ","g "). 대체 (/} / g" ") $ ( '# myDiv'). html로 (myHtmlTableObj) #myDiv 테이블 TD {배경 : 화이트 스모크; 국경 : 1 픽셀의 고체 lightgray} <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">

    테이블 간다

  8. 8.여기에 또는 jQuery를하지 않고, 같은 일을하는 방법은 두 가지가 있습니다 :

    여기에 또는 jQuery를하지 않고, 같은 일을하는 방법은 두 가지가 있습니다 :

    // JQuery와 방법 $ (문서) .ready (함수 () { var에 JSON = [{ "User_Name을": "홍길동", "점수": "10", "팀": "1"}, { "User_Name을": "제인 스미스", "점수": "15", " 팀 ":"2 "}, {"User_Name을 ":"척 베리 ","점수 ":"12 ","팀 ":"2 "}]; var에 TR; 경우 (나는 '); tr.append ( ""JSON + [I] .User_Name + ""); tr.append ( ""JSON + [I] .score + ""); tr.append ( ""JSON + [I] .team + ""); $ ( '테이블') 첫 번째 () APPEND (TR)..; } }); // JQuery와없는 기능 준비 () { var에 JSON = [{ "User_Name을": "홍길동", "점수": "10", "팀": "1"}, { "User_Name을": "제인 스미스", "점수": "15", " 팀 ":"2 "}, {"User_Name을 ":"척 베리 ","점수 ":"12 ","팀 ":"2 "}]; CONST 테이블 = document.getElementsByTagName ( '표') [1]; json.forEach ((OBJ) => { CONST 행 table.insertRow = (-1) row.innerHTML =` $ {obj.User_Name} $ {obj.score} $ {obj.team} `; }); }; 경우 (document.attachEvent document.readyState === "완료"?! document.readyState == "로드") { 준비된(); } 다른 { document.addEventListener ( 'DOMContentLoaded', 대기); } <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> <표> <제> User_Name을 <제> 점수 <일> 팀 ' <표> <제> User_Name을 <제> 점수 <일> 팀

  9. 9.나는 다양한 보고서를 개발하는 많은 시간을 보냈다. 그래서, 지금은 생각이 - 웹 보고서를 구축하기위한 웹 프레임 워크를 만들 수 있습니다. 여기 시작했습니다 :

    나는 다양한 보고서를 개발하는 많은 시간을 보냈다. 그래서, 지금은 생각이 - 웹 보고서를 구축하기위한 웹 프레임 워크를 만들 수 있습니다. 여기 시작했습니다 :

    https://github.com/ColdSIce/ReportUI

    지금은 각도 4 모듈이다. 당신은 TableLayoutComponent로 JSON 데이터를 전달하고 결과로 HTML 테이블을 얻을 수 있습니다. 표는 이미 헤더를 고정하고있다. 또한 당신은 기본적으로 또는 클릭하여 일부 당신의 열을 수정할 수 있습니다. 더 거기, 당신은 등 배경색, 글꼴 색, 행 높이와 같은 테이블 속성을 사용자 정의 할 수 있습니다

    당신이 관심이 있다면 당신은이 프로젝트와 도움에 저를 가입 할 수 있습니다.

  10. 10.여기에는 HTML 테이블로 구문 분석 JSON 객체에 대한 또 다른 방법입니다

    여기에는 HTML 테이블로 구문 분석 JSON 객체에 대한 또 다른 방법입니다

    // HTML 헤더 추출 VALUE. // ( '도서 ID', '책 이름', '종류'와 '가격') VAR의 COL = []; 경우 (나는

  11. 11.이 코드는 많은 도움이 될 것입니다

    이 코드는 많은 도움이 될 것입니다

    function isObject(data){
    var tb = document.createElement("table");

    if(data !=null) {
        var keyOfobj = Object.keys(data);
        var ValOfObj = Object.values(data);

        for (var i = 0; i < keyOfobj.length; i++) {
            var tr = document.createElement('tr');
            var td = document.createElement('td');
            var key = document.createTextNode(keyOfobj[i]);

            td.appendChild(key);
            tr.appendChild(td);
            tb.appendChild(tr);

            if(typeof(ValOfObj[i]) == "object") {

                if(ValOfObj[i] !=null) {
                    tr.setAttribute("style","font-weight: bold");   
                    isObject(ValOfObj[i]);
                } else {
                    var td = document.createElement('td');
                    var value = document.createTextNode(ValOfObj[i]);

                    td.appendChild(value);
                    tr.appendChild(td);
                    tb.appendChild(tr);
                }
            } else {
                var td = document.createElement('td');
                var value = document.createTextNode(ValOfObj[i]);

                td.appendChild(value);
                tr.appendChild(td);
                tb.appendChild(tr);
            }
        }
    }
}

  12. 12.이 포스팅은 매우 도움이 여러분 모두에게있다

    이 포스팅은 매우 도움이 여러분 모두에게있다

    사용 JQuery와 파서 평가하고 iterarate jQuery를 통해 아래의 각 함수의 코드 스니 플릿은 먼저 구문 분석하여 JSON 데이터 :

                    var obj = eval("(" + data.d + ")");

                alert(obj);
                $.each(obj, function (index,Object) {

                    var Id = Object.Id;
                    var AptYear = Object.AptYear;
                    $("#ddlyear").append('<option value=' + Id + '>' + AptYear + '</option>').toString();
                });

    13. from https://stackoverflow.com/questions/17066636/parsing-json-objects-for-html-table by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 크로스 도메인 호출에 IE에서 실패 아약스 JQuery와 $  (0) 2020.10.10
[JQUERY] ) ($ 아약스에 AJAX 요청 배열을 합격 [중복]  (0) 2020.10.10
[JQUERY] 이 주변에 어떤 방법 - jQuery를 이벤트 핸들러는 항상이 결합 된 순서대로 실행? [복제]  (0) 2020.10.10
[JQUERY] CORS는 - 어떻게 '프리 플라이트'는 HttpRequest를합니까?  (0) 2020.10.09
[JQUERY] 즉석에서 CSS 파일을 교체 (그리고 페이지에 새로운 스타일을 적용)  (0) 2020.10.09
,

티스토리툴바