rest + spread(응용)3

다음과 같은 데이터가 있다고 해봅시다. 이런것은 나중에 API문서 등등 데이터를 받오는 것이다 라고 생각해주세요.

JSON 데이터 일반적으로 받아오기

// get.json
{
    "Americas": {
        "korea": [
            {
                "nation": "Seoul, South Korea",
                "name": "Mirae Asset Global Investments",
                "address": "13F, Tower1, 33, Jong-ro, Jongno-gu, Seoul, South Korea",
                "tel": "1577-1640",
                "link": "https://www.am.miraeasset.com/",
                "lat": 37.5619416,
                "lng": 127.00432739999997
            },
            {
                "nation": "Seoul, South Korea",
                "name": "Mirae Asset Daewoo",
                "address": "East Tower, Mirae Asset CENTER1 Bldg, 26, Eulji-ro 5-gil, Jung-gu, Seoul, South Korea",
                "tel": "1588-6800",
                "link": "https://english.miraeassetdaewoo.com/",
                "lat": 37.568293,
                "lng": 126.98470700000007
            },
            {
                "nation": "Seoul, South Korea",
                "name": "Mirae Asset Life Insurance",
                "address": "56, Gukjegeumyung-ro, Yeongdeungpo-gu, Seoul, South Korea",
                "tel": "1588-0220",
                "link": "http://life.miraeasset.com/eng_new/html/index.html",
                "lat": 37.5221883,
                "lng": 126.92971520000003
            }
        ],
        "japan": [
            {
                "nation": "Tokyo, Japan",
                "name": "Global X Japan",
                "address": "",
                "tel": "",
                "link": "https://globalxetfs.co.jp/en/",
                "lat": -6.2262724,
                "lng": 106.8085939
            },
            {
                "nation": "Tokyo, Japan",
                "name": "Global X Japan2",
                "address": "",
                "tel": "",
                "link": "https://globalxetfs.co.jp/en/",
                "lat": -6.2262724,
                "lng": 106.8085939
            }
        ]
    }
}

<script>
    $(function(){
        $.getJSON("/data/get.json", function (data) { //jqury로 get.json파일에 접근했습니다.
                
        }).done(function(data){ // 서버에 성공적으로 접근하면 다음 코드를 실행해주세요.!
            console.log(data);
           
            var {korea: [ ...aniKorea ]} = data.Americas; // {데이터 위치명: [배열의 각 원소들을 가변적으로 받는다.]} = 데이터 있는 위치
            var {japan: [ ...aniJapan ]} = data.Americas; // {데이터 위치명: [배열의 각 원소들을 가변적으로 받는다.]} = 데이터 있는 위치
    
           var extractedkorea = {ko: [ ...aniKorea ]}  // {원하는 키명 : [복사해온 데이터들]}
           var extractedJapan = {jp: [ ...aniJapan ]}  // {원하는 키명 : [복사해온 데이터들]}
    
           console.log(extractedkorea);
           console.log(extractedJapan);
        });
    });
</script>

// 결과)

Object
ko: (3) [{…}, {…}, {…}]
__proto__: Object

Object
jp: (2) [{…}, {…}]
__proto__: Object

이제 데이터를 복사해서 가져왔으니, 원하는 데이터만 화면에 출력해봅시다.

JSON 데이터 화면에 출력하기

 <script>
    $(function(){
        $.getJSON("/data/get.json", function (data) {
                
        }).done(function(data){
            console.log(data);
           // 원본데이터를 복사해오는 코드 
            var {korea: [ ...aniKorea ]} = data.Americas; // 데이터 위치명: [배열의 각 원소들을 가변적으로 받는다.] = 데이터 있는 위치
            var {japan: [ ...aniJapan ]} = data.Americas; // 데이터 위치명: [배열의 각 원소들을 가변적으로 받는다.] = 데이터 있는 위치

           var extractedkorea = {ko: [ ...aniKorea ]}  // {원하는 키명 : [복사해온 데이터들]}
           var extractedJapan = {jp: [ ...aniJapan ]}  // {원하는 키명 : [복사해온 데이터들]}

            console.log(extractedkorea);
            console.log(extractedJapan);
            extractedkorea.ko.forEach((element) => { // 데이터 배열을 반복해서 접근하여 
                $('body').append(element.name + ' / ')  // 원하는 데이터만 출력한다.
            });

            extractedJapan.jp.forEach((element) => { // 데이터 배열을 반복해서 접근하여 
                $('body').append(element.name + ' / ')  // 원하는 데이터만 출력한다.
            })
        });
    });
</script>

결과는 다음과 같습니다.

JSON 데이터 템플릿 만들어서 화면에(원하는 위치에) 출력하기

<div class="main">
    <ul class="lists korea">
    
    </ul>

    <ul class="lists japan">
    
    </ul>
</div>
<script>
$(function(){
    var templateGroble; //템플릿을 공유해서 사용하기 위함!
    var templates = function(data) {
        if(!data.link){
            var template = '';
            template += '<li>';
            template += '<p>'+data.name+'</p>';
            template += '<p>'+data.tel+'</p>';
            template += '<span>'+data.nation+'</span>';
            template += '</li>';
            templateGroble = template;
        } else {
            var template = '';
            template += '<li>';
            template += '<p>'+data.name+'</p>';
            template += '<p>'+data.tel+'</p>';
            template += '<a href="'+data.link+'">'+data.nation+'</a>';
            template += '</li>';
            templateGroble = template;
        }
    };

    $.getJSON("/data/get.json", function (data) {
    }).done(function(data){
        console.log(data);
       
        var {korea: [ ...aniKorea ]} = data.Americas; // 데이터 위치명: [배열의 각 원소들을 가변적으로 받는다.] = 데이터 있는 위치
        var {japan: [ ...aniJapan ]} = data.Americas; // 데이터 위치명: [배열의 각 원소들을 가변적으로 받는다.] = 데이터 있는 위치

       var extractedkorea = {ko: [ ...aniKorea ]}  // {원하는 키명 : [복사해온 데이터들]}
       var extractedJapan = {jp: [ ...aniJapan ]}  // {원하는 키명 : [복사해온 데이터들]}

        extractedkorea.ko.forEach(function(el, i) { // 데이터 배열을 반복해서 접근합니다. 
            templates(el)
            $('.korea').append(templateGroble)
        });

        extractedJapan.jp.forEach((el) => { // 데이터 배열을 반복해서 접근합니다. 
            templates(el)
            $('.japan').append(templateGroble)
        })
    });
});
</script>

1KB

main.html.zip

archive