두개의 객체 배열 비교

자바스크립트 Array iteration 메서드를 찾아보시면 될 것 같습니다. 어떤 걸 의도하신진 모르겠습니다만, code에 대한 건 딕셔너리 형태로 작성할 수 도 있을 것 같습니다.

"temp 배열에 있는 status값을 code배열의 value값에서 찾아 같으면 해당 code의 label값을 출력하고싶어요ㅜㅜ 도와주세요" 1. temp 배열의 값을 모두 출력하고 싶기 때문에 temp 배열을 모두 순회하는 것이 필요합니다. 2. temp의 status 값과 code의 value 값 비교를 해야하나 code의 자료구조가 배열이기 때문에 temp 원소 하나에 code를 전부 순회해야합니다. 따라서 이중 for문이 필요합니다. 3. 이중 for문 내에서 temp의 status 값과 code의 value 값을 비교하여 같을 경우 code의 label을 출력합니다. 코드는 아래와 같습니다. 다만 위 글을 읽고 코드로 구현해보시고 정 안되시면 코드를 보시는 것을 추천드립니다. 추가로 code의 자료구조를 배열에서 맵으로 변경하는 것을 권장드립니다. 1. 코드가 간결해진다. 2. 탐색 시간이 O(n)에서 O(1)로 줄어든다 다만 원소가 4개밖에 없고 더 늘어날 여지가 없어보이기 때문에 탐색 시간이 크게 줄어들지는 않겠습니다. 아니라면 temp의 status에 label을 넣는 것도 좋아보입니다만 temp의 값이 어떻게 사용되는지 몰라서 권장드리긴 어렵겠네용..

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
1. 가장 간단한 for문입니다. 모든 code 값을 순회해서 찾는 방식이예요

for (const t of temp) {
    for (const c of code) {
        if(t.status == c.value){
            console.log(c.label);
        }
    }
}

2. code는 map 자료구조로 변경하면 좋을 듯합니다.

let map = new Map(); 
map.set("A", "좋음");
map.set("B", "나쁨");
map.set("C", "보통");
map.set("D", "기타");

for (const t of temp) {
  console.log(map.get(t.status));
}

temp.forEach(t => {
   console.log(map.get(t.status));
});

3. 간단하게 객체로 표현할수도 있습니다.

let map = {
    "A": "좋음",
    "B": "나쁨",
    "C": "보통",
    "D": "기타",
}

for (const t of temp) {
  console.log(map[t.status]);
}

요렇게 하시면 될 것 같습니다 😊

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const temp = [
  {name:"John1", status:"A"},
  {name:"John2", status:"B"},
  {name:"John3", status:"C"},
  {name:"John4", status:"D"}
];

const code = [
  {value:"A", label:"좋음"},
  {value:"B", label:"나쁨"},
  {value:"C", label:"보통"},
  {value:"D", label:"기타"}
];

temp.forEach(item => {
  const matchingCode = code.find(codeItem => codeItem.value === item.status);
  if (matchingCode) {
    console.log(matchingCode.label);
  }
});

Vue.js를 사용한다고 가정하고 코드를 작성해 드리겠습니다. 이 코드는 temp 배열의 각 항목에 대해 getStatusLabel 메소드를 호출하여 status에 해당하는 label을 출력합니다. getStatusLabel 메소드는 code 배열에서 주어진 status와 일치하는 value를 찾고, 해당 항목의 label을 반환합니다. ----- ✅ Chat GPT의 답변을 평가해 주세요! 답변 내용이 올바른지, 틀린 내용은 없는지 댓글로 작성해 주세요.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<template>
  <div>
    <ul>
      <li v-for="(item, index) in temp" :key="index">
        {{ item.name }} - {{ getStatusLabel(item.status) }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      temp: [
        { name: "John1", status: "A" },
        { name: "John2", status: "B" },
        { name: "John3", status: "C" },
        { name: "John4", status: "D" },
      ],

      code: [
        { value: "A", label: "좋음" },
        { value: "B", label: "나쁨" },
        { value: "C", label: "보통" },
        { value: "D", label: "기타" },
      ],
    };
  },

  methods: {
    getStatusLabel(status) {
      const codeItem = this.code.find((item) => item.value === status);
      return codeItem ? codeItem.label : "알 수 없음";
    },
  },
};
</script>