[json/jquery] json파일 제작하여 jquery로 데이터 불러오기

[ 
    {
        "name": "제목1",
        "text": "내용1",
        "img": "../img/이미지1.jpg"
    },
    {
        "name": "제목2",
        "text": "내용2",
        "img": "../img/이미지2.jpg"
    },
    {
        "name": "제목3",
        "text": "내용3"
        "img": "../img/이미지3jpg"
    },
    {
        "name": "제목4"
        "text": "내용4"
        "img": "../img/이미지4jpg"
    },
    {
        "name": "제목5"
        "text": "내용5"
        "img": "../img/이미지5jpg"
    }
]

✅json
1) 해당 형식으로 원하는 제목과 내용을 작성한다

    $.ajax({
        url: "../js/place.json", // 참고할 json파일 작성
        type: "get", // 타입 작성
        datatype: "json", //데이터 타입 json
        success: function (data) { // 참고 후 결과 값 함수
            $(".map>div").each(function (index) {
                $(this).click(function () {
                    $(".left").addClass("on");
                    let i = $(this).index() - 7; //앞에 index번호 없앰
                    console.log(i);
                    console.log(data[i].name);
                    $("#name").text(data[i].name); //배열맞춰서 불러오기
                    $("#text").text(data[i].text);
                    $("#img").attr("src", data[i].img);
                })
            })
        },
        error: function () {
            alert('error');
        }
    });

✅jquery
1) json 불러오는 방식으로 함수 작성
- 참고 json 파일 연결
- type작성
2) .map div를 인덱스로 받아온다
3) 클릭시 left 에 on클래스가 추가되며 창이열리는 형태
4) i로 인덱스 부여 -7이후 인덱스 추출
-console log를 통해 인덱스 번호와 name이 일치하는지 확인
5) 불러오길 원하는 부분에 id값을 준 후 해당 id에 text로 data의 배열순으로 원하는 정보를 넣어준다
6) 불러오기를 실패한 경우 alert메시지를 띄우게 한다

✔ html에 작성하기 많은 양의 경우 인덱스 규칙을 통해 json으로 작성하면 데이터 관리가 쉽다
✔ console.log를 통해 중간중간 오류를 점검할 수 있다