find()로 배열에서 원하는 값을 찾아보자..

간략과정

• 유저가 국가를 선택하면 DB로 해당 국가의 id값이 들어간다
• 국가 id만을 알고있는 상태에서 Vue 인스턴스에 만들어둔 국가들의 배열 데이터에서 선택한 id값으로 국가의 이름을 알려줘야한다.
• 이걸 어떻게 찾아볼까 고민하다가 때마침 공부한 find()를 이용 할 수 있겠다는 생각이 들어서 응용해봤다!!

코드예시

• Vue 인스턴스의 데이터 부분

countryLists: [
  {
    name: "Qatar",
    className: "Qatar",
    select: false,
    id: 1,
  },
  {
    name: "England",
    className: "England",
    select: false,
    id: 2,
  },
  {
    name: "Argentina",
    className: "Argentina",
    select: false,
    id: 3,
  },
]

• Vue 인스턴스의 로그인 된 유저가 최초 접속시, DB에 저장된 유저가 선택한 국가의 id값을 건네주는 메소드 부분

countrySelectCheckApi: async function () {
  const vm = this;
  await $.ajax({
    url: "백엔드서버의 url",
    type: "POST", // <= http의 get/post (rest의 그것 아님!)
    crossDomain: true,
    data: {
      cm: "정의된 콜메소드",
    },
    dataType: "jsonp",
  }).done(function (data) {
    // 에러코드 10000은 성공을 뜻함
    const code = data.ResultCode[0].Code;
    if (code === "10000") {
      // 국가를 선택했다면 data에 id값이 담겨오니까 length가 0이 아닐것이다.
      if (data["Qatar World Cup Event Info"].length !== 0) {
        // 혹시 undefined로 오지는 않을까 하는 생각에 조건 하나 더 추가해봄
        if (data["Qatar World Cup Event Info"][0].NationID !== 0) {
          vm.countryCode =
            data["Qatar World Cup Event Info"][0].NationID;
        } else {
          vm.countryCode = 0;
        }
      } else {
        // 선택한 국가가 없을 경우도 대비 (length = 0)
        vm.countryCode = 0;
      }
    } else {
      // 10000 외의 코드는 에러!
    }
  });
},

• Vue 인스턴스의 find()를 이용하여, 배열에서 값을 찾는 메소드 부분 <== 이게 핵심

searchNation: function () {
  const vm = this;
  const searchObject = vm.countryLists.find((el) => {
    // 받음 국가id와 프론트에서 선언한 배열 데이터의 id가 같으면,,,
    if (el.id === vm.countryCode) {
      // id가 맞는 배열의 객체를 반환해줌!
      return true;
    }
    return false;
  });
  vm.selectData = searchObject;
  console.log("찾은데이터", vm.selectData);
},