read xml and convert to json

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <script src="http://code.jquery.com/jquery-3.5.0.min.js"></script>
</head>
<body>
   <div class="container">
       <h1>Food Menu</h1>
       <table id="foodlist" class="table">
           <thead class="thead-dark">
               <th>메뉴</th>
               <th>가격</th>
               <th>설명</th>
               <th>이미지</th>
           </thead>
           <tbody>
           </tbody>
       </table>
   </div>
    <script>

        let foods_json = [];
        let total = 0;

        const init = () => {
            $.ajax({
                url: "sample.xml",
                tyle: "xml",
                success: xmlParser
            });
        }

        const xmlParser = (xml) => {
            total = $(xml).find("totalCnt")[0];
            let foods = $(xml).find("food");
            for(let i=0; i<foods.length; i++) {
                let food = {};
                food.name = $(foods[i]).find("name").text();
                food.price = $(foods[i]).find("price").text();
                food.imgs = [];
                food.description = $(foods[i]).find("description").text();
                let images = $(foods[i]).find("image");
                for(let j=0; j<images.length; j++) {
                    let img = $(images[j]).text();
                    food.imgs.push(img);
                }
                foods_json.push(food);
            }
            display(foods_json);
        }

        const display = (foods_json) => {
            for(let i=0; i<foods_json.length; i++) {
                let html = `
                        <tr>
                            <td>${foods_json[i].name}</td>
                            <td>${foods_json[i].price}</td>
                            <td>${foods_json[i].description}</td>
                            <td>${foods_json[i].imgs}</td>
                        </tr>
                    `;
                $("#foodlist tbody").append(html);
            }
        }

        (() => {
            init();
        })();

    </script>
</body>
</html>
<!--
sample.xml

<?xml version="1.0" encoding="UTF-8"?>
<food_menu>
  <totalCnt>39</totalCnt>
  <foods>
      <food>
        <name>김치찌개</name>
        <price>8000</price>
        <description>묵은지와 돼지고기가 잘 어우러진 담백한 김치찌개입니다.</description>
        <images>
            <image>food1_1.jpg</image>
            <image>food1_2.jpg</image>
            <image>food1_3.jpg</image>
        </images>
      </food>
      <food>
        <name>돼지국밥</name>
        <price>7500</price>
        <description>깊은 사골뼈 육수에 얇게 썬 돼지고기와 내장을 넣어 끓인 맛 있는 돼지 국밥입니다.</description>
        <images>
            <image>food2_1.jpg</image>
            <image>food2_2.jpg</image>
            <image>food2_3.jpg</image>
        </images>
      </food>
      <food>
        <name>황태국밥</name>
        <price>9000</price>
        <description>강원도 인제군 남면 용대리에서 겨우내 얼린 질 좋은 황태로 끓은 진한 국묵의 황태국빕입니다.</description>
        <images>
            <image>food3_1.jpg</image>
            <image>food3_2.jpg</image>
            <image>food3_3.jpg</image>
        </images>
      </food>
      <food>
        <name>새싹비빔밥</name>
        <price>7000</price>
        <description>각종 채소 새싹과 야채를 듬뿍 넣은 건강에 좋은 새싹 비밈밥입니다.</description>
        <images>
            <image>food4_1.jpg</image>
            <image>food4_2.jpg</image>
            <image>food4_3.jpg</image>
        </images>
      </food>
      <food>
        <name>뼈다귀해장국</name>
        <price>8000</price>
        <description>살이 많은 국내산 돼지 등뼈를 우거지와 푹 끓여 부드럽게 드실 수 있습니다.</description>
        <images>
            <image>food5_1.jpg</image>
            <image>food5_2.jpg</image>
            <image>food5_3.jpg</image>
        </images>
      </food>
  </foods>
</food_menu>


-->