[JQuery] 03. getJson

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');