JSON 데이터 합치기 2탄!

저번시간!

데이터를 합치기 위해 여러 시도가 있었다! 

 

1차 시도 처음에는 아래처럼 스프레드 문법을 썼다.

// 따로 변수로 담아서
	const bankBaseList = api.data.result.baseList
	const bankOptionList = api.data.result.optionList
// 이런식으로
	const combined = [... bankBaseList, ...bankOptionList];

하지만 이렇게 되면 하나의 배열 안에는 들어가지만 내가 원하는 모양인

데이터가 하나의 객체로 모이지는 않기 때문에 고민이 필요했다. 

// 결과 
[
	{
      "aa": "bb"
    },
    {
     "cc": "dd"
    }
]
// 내가 원하는 모양
[
	{
      "aa": "bb",
      "cc": "dd"
    }
]

2차 시도 이번에는 많이 돌아가보기로 했다.

// 먼저 받아온 데이터에서 두 배열을 따로 변수에 담은 뒤 
	const bankBaseList = api.data.result.baseList
	const bankOptionList = api.data.result.optionList

// bankBaseList와 bankOptionList 합치는 함수를 만들고 
    function combine(base, options) {
        return options.map(option => {
          const baseObj = base.find(item => item.fin_prdt_cd === option.fin_prdt_cd);
          return { ...baseObj, ...option };
        });
      }
// 위 함수를 활용해서 optionList를 baseList와 합친 optional 배열 생성!
	const optional = combine(bankBaseList, bankOptionList);

이렇게 하니 optional 변수에 내가 원하는 데로 하나의 배열 안에 두 객체를 합칠 수 있었다! 

하지만 아직 충분하지 않았다. 이유는 다이나믹 라우팅을 사용하기 때문이다! 

 

여기서 잠깐!

다이나믹 라우팅이란?

쉽게 말 하자면 URL의 끝 부분이 바뀌어도 같은 페이지를 보여줄 수 있는데 이를 활용해서

URL의 끝 부분에 내가 원하는 것을 넣어 원하는 것과 일치하는 데이터를 가져와 

페이지의 구조는 똑같지만 내용은 다르게 할 수 있는 기술이다! 

 

다이나믹 라우팅을 사용하는 이유!

1. 여러 페이지를 만들지 않아도돼 유연성과 확장성이 높아진다.

2. URL을 사용하여 동적으로 데이터를 로드할 수 있다. 

등이 있다! 

 

자, 그래서 본론으로 돌아와 왜 충분하지 않았을까! 

이유는 두개의 데이터가 모두 들어오기 때문이다. 

페이지마다 사용자가 원하는 데이터를 화면에 나타나게 해야하는데

그러기 위해서는 페이지에 맞는 데이터를 가져오기 위한 기준이 필요하다! 

하는법 

이렇게 url에 적금 이름을 넣으면

// 이렇게 하면 URL이  /datailhana/${내가 누른것의 이름} 으로 된다!
<Link href={`/datailhana/${a.fin_prdt_nm}`} className='text-decoration'>

URL이 이렇게 변한다! 

이렇게

url에 있는 적금 이름을 가져와서 JSON 에서 이름에 맞는 객체를 꺼내 화면에 보여주는 것이다. 

전체 코드로 보면 아래와 같다. 

    const utf8String = JSON.stringify(props) // UTF-8로 인코딩된 문자열
    const decodedString = decodeURIComponent(utf8String)
    const jsonObject = JSON.parse(decodedString); // 문자열로 바뀌
    const productName = jsonObject.params.id;

    const JUK_URL = `https://finlife.fss.or.kr/finlifeapi/savingProductsSearch.json?auth=${process.env.API_KEY}&topFinGrpNo=020000&pageNo=1&financeCd=%ED%95%98%EB%82%98`
    // API 호출!
    const api = await axios.get(JUK_URL);
    // 데이터 나누고
    const bankProducts = api.data.result.baseList
    const bankProductOpt = api.data.result.optionList

    // 적금 목록과 option 합치는 함수
    function combine(base, options) {
        return options.map(option => {
          const baseObj = base.find(item => item.fin_prdt_cd === option.fin_prdt_cd);
          const combinedObj = baseObj ? { ...baseObj, ...option } : option;
          return combinedObj;
        });
      }
      // optionList를 baseList와 합친 optional 객체 생성
     const optional = combine(bankProducts, bankProductOpt);
      // 이름이 같은 항목 객체 생성
     const detailhana = optional.find(item => item.fin_prdt_nm === productName);

 

위 처럼 하면  URL의 내맘적금 부분과 이름이 같은 항목만 있는 객체를 생성해 아래와 같이 쓸 수 있다!

<article>
	<p>{detailhana.fin_prdt_nm}</p>
</article>

내맘 적금의 JSON 데이터만 남아 아래 이미지처럼 사용자가 원하는 페이지만 보여줄 수 있다!

 

이렇게!