JS/JQuery

[JQuery] 03. getJson

밍글링글링 2017. 8. 28.
728x90

03_getJson.html

<meta charset="utf-8" />
<script src="../lib/jquery.js"></script>
<script src="03_getJson.js"></script>
<style>
* {
    margin: 20px;
}

h2 {
    color: red;
}

#fruits_data tbody .head {
    font-size: 20px;
}
</style>

<div id="wrapper">
    <h2>각 영역에 맞는 값을 추가시켜 주세요.</h2>
    <table id="fruits_data" border="1" cellpadding="10" cellspacing="0">
        <tbody>
            <tr class="head">
                <td>과일이름</td>
                <td>가격</td>
                <td>유통기한</td>
                <td>원산지</td>
            </tr>
            <tr>
                <td>사과</td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>딸기</td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>귤</td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>파인애플</td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tbody>
    </table>
</div>

 

03_getJson.js

$.get('data/data.json', function(data){
    var fruits = data.fruits;
    var table = $('#fruits_data');
    for(var i in fruits){
        var fruit = fruits[i];
        var cnt = 0;
        for(var prop in fruit){
            var text = fruit[prop];
            var tr = table.find('tr').eq(parseInt(i)+1);
            var td = tr.find('> td').eq(cnt++);
            td.text(text);
        }
    }
}, 'json');

 

 

728x90

'JS > JQuery' 카테고리의 다른 글

JQuery Draggable(창 위치 이동)  (0) 2018.10.17
[JQuery] [ajax] 05. ajax  (0) 2017.08.28
[JQuery] 02. getXml  (0) 2017.08.28
[JQuery] 01. load  (0) 2017.08.28

댓글