TIL/academy++

ajax로 json파일 데이터 가져오기

토희 2022. 7. 28. 00:41
728x90

오늘 7/27일 학원에서 배운거를 토대로, 내가 예전에 캠핑 사이트 홈페이지 만들려고 했을때, 데이터 가져오기 한거를 다시!

그때는 제이쿼리를 아예 모르는 상태였고, 비동기처리도 처음해본 상태에서 async, await 쓸려다가 엄청 오래걸림

 

json파일은 이렇게 구성되어 있음

{
    "tent": [
      {
        "id": 1,
        "name": "Orange Tent",
        "price": "W249,000",
        "thumbnail": "~/assets/img/tent/tent1.png",
        "merit": "#1~2인용 #여름용 #백패킹 #1.63kg #초경량"
      },
      {
        "id": 2,
        "name": "Yellow Tent",
        "price": "W249,000",
        "thumbnail": "~/assets/img/tent/tent1.png",
        "merit": "#1~2인용 #여름용 #백패킹 #1.63kg #초경량"
      },
      {
        "id": 3,
        "name": "Green Tent",
        "price": "W249,000",
        "thumbnail": "~/assets/img/tent/tent1.png",
        "merit": "#1~2인용 #여름용 #백패킹 #1.63kg #초경량"
      },
      {
        "id": 4,
        "name": "Blue Tent",
        "price": "W249,000",
        "thumbnail": "~/assets/img/tent/tent1.png",
        "merit": "#1~2인용 #여름용 #백패킹 #1.63kg #초경량"
      }
    ],
    "stove": [
      {
        "id": 1,
        "name": "Orange Stove",
        "price": "W249,000",
        "thumbnail": "~/assets/img/tent/tent1.png",
        "merit": "#1~2인용 #여름용 #백패킹 #1.63kg #초경량"
      },
      {
        "id": 2,
        "name": "Yellow Stove",
        "price": "W249,000",
        "thumbnail": "~/assets/img/tent/tent1.png",
        "merit": "#1~2인용 #여름용 #백패킹 #1.63kg #초경량"
      },
      {
        "id": 3,
        "name": "Green Stove",
        "price": "W249,000",
        "thumbnail": "~/assets/img/tent/tent1.png",
        "merit": "#1~2인용 #여름용 #백패킹 #1.63kg #초경량"
      },
      {
        "id": 4,
        "name": "Blue Stove",
        "price": "W249,000",
        "thumbnail": "~/assets/img/tent/tent1.png",
        "merit": "#1~2인용 #여름용 #백패킹 #1.63kg #초경량"
      }
    ]
  }

무제폴더 > ajax1.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	table {
	border-collapse: collapse;
	width: 900px;
}

td, th {
	border: 1px solid #000;
	height: 30px;
    padding: 0 10px;
	text-align: center;
    
}
</style>
<script type="text/javascript" src="./jquery-1.12.3.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	
	$.ajax({
		url: "./camping_items.json", // 경로
		type: "GET", // 전송방식(GET: 주소형태, POST: 주소 헤더형태)
		dataType: "json", //데이터 형태
		success: function(res) { // 성공했을때 결과를 res에 받고 함수 실행
			var html = "";
			
            var cate = [];
            for(var a of Object.keys(res)){
                cate.push(a);
            }
            
			for(var data of res.tent){				               
				html +="<tr>";
                html +="<td>"+ cate[0] +" </td>";
				html +="<td>"+ data.id +" </td>";
				html +="<td>"+ data.name +" </td>";
				html +="<td>"+ data.price +" </td>";
				html +="<td>"+ data.thumbnail+" </td>";
				html +="<td>"+ data.merit+" </td>";
				html +="</tr>";
			}

			for(var data of res.stove){				               
				html +="<tr>";
                html +="<td>"+ cate[1] +" </td>";
				html +="<td>"+ data.id +" </td>";
				html +="<td>"+ data.name +" </td>";
				html +="<td>"+ data.price +" </td>";
				html +="<td>"+ data.thumbnail+" </td>";
				html +="<td>"+ data.merit+" </td>";
				html +="</tr>";
			}
			
			$("tbody").html(html); 
		}, 
		error : function(request, status, error) { // 실패했을때 함수 실행
			console.log(request.responseText); // 실패 상세 내역
		}
	})
});
</script>
</head>
<body>
<table>
	<thead>
        <tr>
            <th colspan="6">판매리스트</th>
        </tr>
		<tr>
            <th>카테고리</th>
			<th>상품번호</th>
			<th>상품명</th>
			<th>가격</th>
			<th>이미지</th>
			<th>상품설명</th>	
		</tr>
	</thead>
	<tbody></tbody>
</table>
</body>
</html>

테이블 형식으로 불러오기

 

 

무제폴더 > ajax2.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
    .card_wrap{
       overflow: hidden;
        width: 1500px;
    }
    .item_card{
        width: calc(1500px / 4);
        float: left;
        height: 400px;
        border: 1px solid #000;
        border-radius: 5px;
        padding: 10px;
        box-sizing: border-box;
    }
    img{
        width: 100%;
    }
    .info{
        padding: 0 5px;
    }
    .cate{
        font-size: 18px;
        font-weight: bold;
    }
    .name{
        font-size: 25px;
        padding: 8px 0;
    }
    .merit{
        height: 60px;
    }
    .card_bottom{
        display: flex;
        justify-content: space-between;
    }
    .btn{
        font-size: 20px;
        border: 1px solid #000;
        width: 25px;
        height: 100%;
        text-align: center;
    }
    .price{
        font-size: 18px;
        padding-top: 2px;
    }
</style>
<script type="text/javascript" src="./jquery-1.12.3.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	
	$.ajax({
		url: "./camping_items.json", // 경로
		type: "GET", // 전송방식(GET: 주소형태, POST: 주소 헤더형태)
		dataType: "json", //데이터 형태
		success: function(res) { // 성공했을때 결과를 res에 받고 함수 실행
			var html = "";
			
            var cate = [];
            for(var a of Object.keys(res)){
                cate.push(a);
            }
			
			for(var data of res.tent){	
                html += "<div class=\"item_card\">";
                html += "<img src=\"\./tent1.png\" alt=\"\">";
                html += "<div class=\"info\">";
                html += "<div class=\"name\">" + data.name +"</div>";
                html += "<div class=\"merit\">#1~2인용</div>"
                html += "<div class=\"card_bottom\">";
                html += "<div class=\"price\">W249,000</div>"
                html += "<div class=\"btn\">+</div>"
                html += "</div>";
                html += "</div>";
                html += "</div>";             
			}
            for(var data of res.stove){	
                html += "<div class=\"item_card\">";
                html += "<img src=\"\./tent1.png\" alt=\"\">";
                html += "<div class=\"info\">";
                html += "<div class=\"name\">" + data.name +"</div>";
                html += "<div class=\"merit\">#1~2인용</div>"
                html += "<div class=\"card_bottom\">";
                html += "<div class=\"price\">W249,000</div>"
                html += "<div class=\"btn\">+</div>"
                html += "</div>";
                html += "</div>";
                html += "</div>";             
			}

			$(".card_wrap").html(html); 
		}, 
		error : function(request, status, error) { // 실패했을때 함수 실행
			console.log(request.responseText); // 실패 상세 내역
		}

	})
	
});
</script>
</head>
<body>
    <div class="card_wrap">

    </div>
</body>
</html>

card형식으로 불러오기

html 안에 "" 넣어줄때는 \ 를 써줘야함! 

 

 

예전에 작성한 코드는 이래, 그때는 vue로 작업했었음

<template>
  <RouterLink
    class="card"
    style="width: 20rem"
    v-for="(item, id) in items.tent"
    :key="id"
    :to="`/items/tent/${item.id}`"
  >
    <img src="../assets/img/tent/tent1.png" class="card-img-top" alt="tent" />
    <div class="card-body">
      <h5 class="card-title">{{ item.name }}</h5>
      <p class="card-text">
        {{ item.merit }}
      </p>
      <div class="footer">
        <p class="price">{{ item.price }}</p>
        <button type="button" class="btn btn-outline-success">
          <span class="plus" @click="addItem">+</span>
        </button>
      </div>
    </div>
  </RouterLink>
</template>
<script>
export default {
  data() {
    return {
      isAddItem: false,
      isRow4: false,
      items: {
        tent: [],
        stove: [],
      },
    };
  },
  created() {
    this.fetchItems();
  },
  methods: {
    async fetchItems() {
      const result = await import(`~/public/data/items.json`);
      const { tent, stove } = result.default;
      this.items = { tent, stove };
    },
    addItem() {
      this.isAddItem = true;
    },
  },
};
</script>
<style lang="scss" scoped>
.card {
  margin: 0 10px 0 10px;
  cursor: pointer;
  color: black;
  text-decoration-line: none !important;
  flex-wrap: wrap;
}
.card-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.card-title {
  margin-bottom: 20px;
}
.footer {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0;

  .plus {
    font-size: 1rem;
  }
}
</style>

 

끝! Good night!

728x90

'TIL > academy++' 카테고리의 다른 글

테이블 체크박스 Table check  (0) 2022.07.27

'TIL/academy++'의 다른글

  • 현재글ajax로 json파일 데이터 가져오기

관련글

댓글

티스토리툴바