데이터 가지고 놀기(응용)2

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

// data.json
{
    "family": [
        {
            "global" :[
                {
                    "name": "Mirae Asset Daewoo",
                    "link": "https://english.miraeassetdaewoo.com/"
                },
                {
                    "name": "Mirae Asset Global Investments",
                    "link": "https://www.am.miraeasset.com/"
                }
            ]
        },
        {
            "korea": [
                {
                    "name": "Mirae Asset Daewoo",
                    "link": "https://www.miraeassetdaewoo.com/"
                },
                {
                    "name": "Mirae Asset Global Investments",
                    "link": "https://investments.miraeasset.com/main/index.do"
                },
                {
                    "name": "Mirae Asset Life Insurance",
                    "link": "http://life.miraeasset.com/"
                }
            ]
        },
        {
            "mongolia": [
                {
                    "name": "Mirae Asset Daewoo",
                    "link": "https://miraeassetsecurities.mn/"
                }
            ]
        }
    ]
}

<section class="main">
      <div class="inner">
         <ul class="hide global"></ul>
         <ul class="hide korea"></ul>
         <ul class="hide mongolia"></ul>
      </div>
</section>

  <script>
    $(function(){
        $('.top-inner').on('click','> a',function(){
            $('.top-inner').toggleClass('on')
            $('.hide').toggleClass('on');
        });
        var templateGroble;
        var template = function(data){
            if(!data.link){
                var template = '';
                template += '<li>';
                template += '<span>'+data.name+'</span>';
                template += '</li>';
                templateGroble = template;
            } else {
                var template = '';
                template += '<li>';
                template += '<a href="'+data.link+'">'+data.name+'</a>';
                template += '</li>';
                templateGroble = template;
            }
        };

        $.getJSON("/data/data.json", function(data){
        }).done(function(data){
            var copyData = $.extend(true, {}, data);  // 제이쿼리 메서드중 $.extend 데이터 깊은(true) 복사 기능

            var newArr = function(idx) {  //원본 데이터에 'id: 번호' 가 없어서 복사해온 데이에 'id: 번호'를 만들어서 넣어준 것.  1)
                return idx.map(function(data, index){
                    return {
                        id: index + 1,
                        ...data
                    } 
                });
            };

            newArr(copyData.family[0].global).forEach(function(el){
                if (el.id === 1){ el.link = "" }  // 위에서 'id:번호'를 만들어 주었으니, 이젠 특정 데이터에만 내가 하고 싶은 것을 할수 있다. 2)
                template(el);
                $('.global').append(templateGroble);
            });

            newArr(copyData.family[1].korea).forEach(function(el){
                template(el);
                $('.korea').append(templateGroble)
            });
            
            newArr(copyData.family[2].mongolia).forEach(function(el){
                template(el);
                $('.mongolia').append(templateGroble)
            });
        })
    });
</script>

3KB

json-test.zip

archive

Open

data-json