html에 json파일 넣어서 데이터 불러오기

1. 폴더에 json파일 저장

그런데 확장자는 .js로 저장해야함

 

※엑셀파일을 json파일로 만들기

1. 엑셀파일 저장 후 아래 링크에서 불러오기

beautifytools.com/excel-to-json-converter.php

제일 상단에는 이렇게 종류명(?)을 적어줘야함

 

그래야지 이렇게 나옴

 

 

2. json 파일을 폴더에 저장

저장할때 확장자명을 .js로 저장

 

 

3. json파일에서 수정 및 export

{
    "Sheet1": [
        {
            "symbol": "AAVE",
            "name": "에이브"
        },
        {
            "symbol": "ADA",
            "name": "에이다"
        },
        {
            "symbol": "ADP",
            "name": "어댑터 토큰"
        }
    ]
}

위에 있는 파일에서

 

export default [
    {
        "symbol": "AAVE",
        "name": "에이브"
    },
    {
        "symbol": "ADA",
        "name": "에이다"
    },
    {
        "symbol": "ADP",
        "name": "어댑터 토큰"
    }
]

이렇게 제일 바깥에 있는 중괄호를 삭제해주고

export를 써주면 됨.

 

 

 

 

 

4. html에 스크립트 불러오기

// json.js ---> json파일
// main.js ---> 메인 script파일

<script type="module" src="main.js"></script>

타입 모듈을 꼭 써줘야함.

 

 

5. 스크립트에서 json데이터 불러오기

import data from './json.js';

console.log(data);

let dataArr = data; // 이렇게 변수에 담을 수도 있음