[javascript] 기준 object 변경 없이 조회한 object 데이터만 set 하기

서론

데이터 입력하는 화면에서 불러오기하여 가져온 데이터를 set 해달라는 요청이 있어서 개발을 시작하였습니다. 그런데 입력하는 화면에서 사용하는 obejct와 불러오기하여 가져온 object가 달라서 그대로 set할 수 없었습니다. 그래서 기준 object에 존재하는 속성 값만 set 하는 방법을 적어놓았습니다.

데이터

// 기준 데이터
const a = {
	test : 'test',
	test1: '',
	test2: '2'
}

//조회한 데이터
const b = {
    test1: '11',
    test2: '22'
    test3: '33'
}

//원하는 데이터
const a = {
    test: 'test', // b에 key가 없으므로 유지
    test1: '11' // a가 빈값이고 b에 존재하므로 set
    test2: '2' // 기존 데이터가 있으므로 유지
}

 

확인 사항

1. 기준으로 만든 object는 추후 api를 호출하기 위해 만든 obejct이므로 추가하지 않는다. 

2. 조회한 데이터 object는 기준 object와 key가 다르므로 기준 object에 있는 key의 value값만 set한다.

3. 기준 데이터를 화면에서 set한 데이터가 있다면 변경하지 않는다.

소스

<template>
  <div class="about">
    <h1>This is an about page</h1>
    test
    <input class="int" v-model="a.test" />
    test1
    <input class="int" v-model="a.test1" />
    test2
    <input class="int" v-model="a.test2" />
    <button type="button" class="btn_type btn_primary" @click="getData">
      <span>데이터 불러오기</span>
    </button>

    불러온 데이터 : {{ b }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      a: {
        test: "",
        test1: "",
        test2: "",
      },
      b: null,
    };
  },
  computed: {},
  created() {},
  methods: {
    getData() {
      //api 호출 이후 조회한 데이터
      this.b = {
        test1: "11",
        test2: "22",
        test3: "33",
      };

      let dataArr = Object.entries(this.b).reduce((acc, [key, value]) => {
        // 조회한 데이터 빈값 체크
        if (value) {
          for (let item of Object.entries(this.a)) {
            // 기준 object에 있는 key 인지 체크 및 기준 데이터 빈값 체크하여 데이터 set
            if (item[0] === key && !item[1]) acc.push([key, value]);
          }
          return acc;
        }
      }, []);

      this.a = { ...this.a, ...Object.fromEntries(dataArr) };
    },
  },
};
</script>

 

getData 설명

1.  조회한 데이터 b를 object.entries 하여 배열로 반환

2. 배열 데이터를 key, value 별로 reduce

3. 조회한 데이터 빈값 체크

4. 기준 데이터 a를 object.entries 하여 배열로 반환

5. 배열 데이터 for문

6. 기준 데이터 key와 reduce 키와 동일 여부 체크 및 기준 데이터 빈값 체크 하여 빈값이 없을시 기준 데이터에 조회한 데이터를 push

7. 기준 데이터에 기존의 기준 데이터와 reduce로 생성한 배열 데이터를 object로 치환하여 합치기

 

확인

.

 

테스트 케이스 1

기존 데이터가 하나도 없을시 조회된 데이터 test1 / test2 의 value는 set 하였고 test3는 기준 object에 없으므로 set하지 않는다.

 

 

테스트 케이스 2

기존 데이터에 test1이 있으므로 test1는 set하지 않고 조회된 데이터에서 test2에만 set한다.

 

결론

하루만에 급하게 해달라고 하여 기준 object의 데이터를 = 로 나열하여 넣으려다가 몇십개의 나열이 싫어서 급하게 적용하여 만든 소스입니다. 더 좋은 방법이 있으면 댓글 부탁드립니다.