[Team 제주 넘는 차] 배열에서 여러 객체의 값 꺼내오기

Ail_ 2022. 3. 10. 14:31

자바스크립트의 .map을 사용했다.

더 좋은 방법이 있을 것 같지만...일단 그냥 모두 적었다.

[javascript] 객체 배열에서 속성 값을 배열로 추출 - 리뷰나라

다음 구조의 JavaScript 객체 배열이 있습니다. objArray = [ { foo: 1, bar: 2}, { foo: 3, bar: 4}, { foo: 5, bar: 6} ]; 각 객체에서 필드를 추출하고 값을 포함하는 배열을 가져 오려고합니다 (예 : field foo는 array) [

daplus.net

참고한 링크2

Array.prototype.map() - JavaScript | MDN

The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.

developer.mozilla.org

store/models/main.js

// ...

/* RestAPI 호출 */
      api
        .get('/serverApi/main')
        .then(response => {
          // const carList = response && response.data && response.data.map
          const carList =
            response &&
            response.data &&
            response.data.map(({ car_img, car_name, car_fuel, car_rank, car_star, car_price }) => ({
              car_img,
              car_name,
              car_fuel,
              car_rank,
              car_star,
              car_price
            }))
          console.log('actCarList', carList)
          context.commit('setCarList', carList)
        })
        .catch(error => {
          // 에러인 경우 처리
          console.error('CarList.error', error)
          context.commit('setCarList', [])
        })
        
// ...

views/main/main.vue

<template>

// ...

    <div class="contents_list">
      <div v-for="car in carList" :key="car.index" class="contents">
        <div class="img_box">
          <img :src="car.car_img" :alt="car.car_name" />
        </div>
        <div class="contents_box">
          <dl class="c_box_01">
            <dt class="rank_name" :v-model="car.car_name">{{ car.car_name }}</dt>
            <dd class="fuel_name" :v-model="car.car_fuel">{{ car.car_fuel }}</dd>
            <dd>유모차/카시트 신청 가능</dd>
          </dl>
          <div class="c_box_02">
            <span class="car_rank" :v-model="car.car_rank">{{ car.car_rank }}</span>
            <dd class="star" :v-model="car.car_star">★{{ car.car_star }}</dd>
          </div>
          <div class="price c_box_03" :v-model="car.car_price">
            {{ car.car_price }}
            <button @click="goRes(car)">바로 예약 하기</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script src="https://cdn.jsdelivr.net/vue/2.0.3/vue.js"></script>
<script>
export default {
  data: function () {
    return {

// ...

      cars: [
        {
          car_img: '',
          car_name: '',
          car_fuel: '',
          car_rank: '',
          car_star: '',
          car_price: ''
        }
      ]
    }
  },
  computed: {
    carList() {
      // 자동차 리스트 불러오기
      return this.$store.getters.CarList
    },

// ...

  },
  created() {
    // this.carList() // 자동차 리스트 불러오기
    this.$store.dispatch('actCarList')
  },

// ...

</script>

결과