분류 javascript

Javascript의 배열 메서드를 사용하여 API 데이터 처리

컨텐츠 정보

  • 조회 307 (작성일 )

본문

데이터 조작은 모든 개발자의 핵심 기술입니다. API 기반 환경에서 수신하는 데이터의 대부분은 애플리케이션 또는 UI에 필요한 방식과 직접 일치하지 않는 방식으로 형식이 지정됩니다. 각 웹 서비스 및 타사 API는 다릅니다. 데이터의 형태를 정렬, 정규화, 필터링 및 조작 할 수 있는 기능이 여기에 있습니다.


https://blog.bearer.sh/javascript-api-array-data-manipulation/


이 기사에서는 Javascript에서 데이터로 작업하는 몇 가지 일반적인 방법을 살펴 보겠습니다. 따라하려면 Node.js 또는 브라우저에서 코드로 작업해야 합니다.


API에서 데이터 검색 


시작하기 전에 데이터가 필요합니다. 기사의 나머지 예제에서는 GitHub의 v3 REST API 검색에서 반환 된 데이터를 사용합니다. 검색 / 리포지토리 엔드 포인트를 사용하여 검색어와 일치하는 리포지토리를 쿼리합니다 (이 경우에는 bearer로 설정된 q 매개 변수). 또한 결과 수를 페이지 당 10 개로 제한하고 한 페이지로만 제한합니다. 이것은 우리의 예제에서 더 관리하기 쉽게 만듭니다.


Fetch를 사용하여 API에 연결하고 기본 오류 처리를 사용하여 함수로 래핑합니다. 나중에 각 예제에서 함수를 재사용 할 수 있습니다.


const apiCall = () => fetch('https://api.github.com/search/repositories?q=bearer&per_page=10').then(res => {
  if (res.ok) {
    return res.json()
  }
  throw new Error(res)
})
.catch(console.err)


Node.js를 사용하는 경우 node-fetch 패키지를 사용하여 Fetch 지원을 추가 할 수 있습니다. npm install -S node-fetch를 사용하여 프로젝트에 설치합니다. 그런 다음 프로젝트 파일 맨 위에 필요합니다.


const fetch = require('node-fetch')


async / await도 사용할 것입니다. 플랫폼 (예 : Node.js의 일부 버전)이 최상위 async / await를 지원하지 않는 경우 코드를 비동기 함수로 래핑해야 합니다. 예를 들면 :


async function example() {
 // Code here

	let results = await apiCall()

// More code

}


설정이 끝나면 응답 데이터 처리를 시작하겠습니다. API 호출의 결과는 일부 일반 메타 데이터를 포함하는 객체와 항목 키가 있는 저장소 배열을 제공합니다. 이를 통해 다양한 기술을 사용하여 배열을 반복하고 결과에 따라 조치를 취할 수 있습니다. 몇 가지 사용 사례를 살펴 보겠습니다.


결과 정렬 


GitHub를 포함한 많은 API를 사용하여 특정 기준에 따라 결과를 정렬 할 수 있습니다. 거의 모든 권한이 없습니다. 예를 들어 GitHub의 저장소 검색은 별표, 포크, 도움이 필요한 문제 및 항목이 최근에 업데이트 된 방법으로 만 정렬 할 수 있습니다. 다른 순서의 결과가 필요한 경우 고유 한 정렬 기능을 구축해야 합니다. 저장소에 있는 미해결 문제 수를 기준으로 결과를 정렬하려고 한다고 가정 해 보겠습니다. 즉, 문제가 가장 적은 저장소가 먼저 표시되고 가장 많은 문제가 있는 저장소가 마지막에 표시되어야 합니다.


사용자 지정 정렬 함수와 함께 Array.sort를 사용하여 이를 수행 할 수 있습니다.


// Sort by open issues
const sortByOpenIssues = repos => repos.sort((a,b) => a.open_issues_count - b.open_issues_count)

// Run the apiCall function and assign the result to results
let results = await apiCall()

// Call sort on the items key in results
console.log(sortByOpenIssues(results.items))


무슨 일이 일어나고 있는지 이해하기 위해 정렬이 어떻게 작동하는지 살펴 보겠습니다. 이 메서드는 특정 반환 값을 예상합니다.


  • 0보다 작은 값은 첫 번째 값이 두 번째 값보다 크고 순서에서 그 앞에 와야 함을 의미합니다.
  • 값 0은 두 값이 동일 함을 의미합니다.
  • 0보다 큰 값은 두 번째 값이 첫 번째 값보다 크고 순서에서 그 앞에 와야 함을 의미합니다.

이러한 조건으로 작업하는 가장 쉬운 방법은 첫 번째 값에서 두 번째 값을 빼는 것입니다. 따라서 위의 코드에서 a.open_issues_count에서 b.open_issues_count를 뺍니다. "a"의 문제 수가 많으면 결과는 0보다 커집니다. 같으면 0이 됩니다. 마지막으로 b가 더 크면 결과는 음수가 됩니다.


sort 메서드는 항목의 모든 이동을 처리하고 새로운 배열을 반환합니다. 위의 예에서는 두 값이 비교되지만 위에서 언급 한 기준에 해당하는 계산을 사용하여 배열 결과를 정렬 할 수 있습니다.


결과 필터링 


정렬은 데이터의 순서를 변경했지만 필터링은 특정 기준에 따라 데이터를 좁힙니다. 그릇에서 특정 색상의 사탕을 모두 제거하는 것으로 생각하십시오. 이를 처리하기 위해 배열에 Javascript의 내장 필터 메소드를 사용할 수 있습니다. 정렬과 유사하게 필터 메서드는 각 항목을 반복하고 새 배열을 반환합니다. 모두 몇 가지 필터 시나리오를 살펴 보겠습니다.


먼저 설명이 포함 된 리포지토리만 표시하는 필터를 만듭니다.


// Filter only repos that have descriptions
const descriptionsOnly = (repos) => repos.filter((repo) => repo.description)

let results = await apiCall()
console.log(descriptionsOnly(results.items))


이 경우 API가 값을 반환했는지 null을 반환했는지를 나타 내기 위해 repo.description의 진실성을 반환합니다. 루프의 현재 반복이 true를 반환하면 해당 반복의 항목이 새 배열로 푸시됩니다.


설명과 홈페이지 URL이 모두 있는 저장소 만 원하는 경우 어떻게 해야 합니까? 이를 위해 이전 예제를 수정할 수 있습니다.


// Filter only repos with URL and description
const homeAndDescription = repos => repos.filter(repo => repo.homepage && repo.description)

let results = await apiCall()
console.log(homeAndDescription(results.items))


Javascript의 AND 연산자 (&&)를 사용하여 설명과 URL이 모두 존재하는지 확인할 수 있습니다. 이 경우 전체 표현식이 true를 반환하고 배열의 항목이 새 배열에 추가됩니다. 둘 중 하나가 거짓이면 전체 표현식이 거짓이고 반복이 새 배열에 추가되지 않습니다.


좀 더 복잡한 것은 어떻습니까? 특정 날짜 이후에 업데이트 된 모든 리포지토리를 원한다고 가정 해 보겠습니다. 임계 값을 설정하고 각 저장소의 updated_at 값과 비교하여 이를 수행 할 수 있습니다.


// Set a threshold

let date_threshold = Date.parse('2020-08-01')

// Filter over results and compare the updated date with the cutoff date
const filterByDate = (repos, cutoff_date) => repos.filter(repo => Date.parse(repo.updated_at) > date_threshold)

let results = await apiCall()

console.log(filterByDate(results.items, date_threshold))


이전 예제와 마찬가지로 필터에 전달 된 함수에서 반환 된 값의 진실성은 항목이 새 배열에 추가되는지 여부를 결정합니다.


데이터 모양 및 데이터 형식 변경 


수신 한 데이터가 사용 사례에 필요한 데이터가 아닐 때도 있습니다. 너무 많이 포함하거나 잘못된 형식 일 수 있습니다. 이 문제를 해결하는 한 가지 방법은 데이터를 정규화 하는 것입니다. 데이터 정규화는 일련의 기준에 맞게 데이터를 구조화하는 프로세스입니다. 예를 들어 이러한 API 상호 작용이 서버에서 발생하지만 클라이언트에는 데이터의 하위 집합이 필요하다고 가정 해보십시오. 클라이언트에 전달하기 전에 데이터의 형태를 변경할 수 있습니다.


const normalizeData = repos => repos.map(repo => ({
	url: repo.html_url,
	name: repo.name,
	owner: repo.owner.login,
	description: repo.description,
	stars: repo.stargazers_count
})

let results = await apiCall()

console.log(normalizeData(results.items))


위의 코드에서 맵 배열 메서드는 결과를 반복하는 데 사용됩니다. 반환하는 값으로 구성된 새 배열을 반환합니다. 이 경우 리포지토리의 데이터는 몇 개의 키 / 값 쌍만 포함하도록 단순화되었으며 키 이름은 더 쉽게 이해할 수 있게 되었습니다.


이 시간을 사용하여 데이터를 수정할 수도 있습니다. 예를 들어 Number()에서 repo.stargazers_count를 래핑하여 개수가 항상 숫자이고 문자열이 아님을 확인할 수 있습니다.


마무리 


API에서받은 데이터를 관리하는 것은 모든 API 통합의 중요한 부분입니다. 모든 API는 고유 한 형식으로 다른 형태의 데이터를 반환합니다. 모양, 때로는 정렬 순서 및 필터링 옵션을 더 많이 제어 할 수 있는 GraphQL API는 예외입니다.


더 큰 데이터 처리 노력의 일환으로 데이터를 사용하든, 사용자에게 애플리케이션의 유용성을 개선하기 위해 데이터를 사용하든 상관없이 데이터를 앱에서 소화 할 수 있도록 몇 가지 작업을 수행해야 합니다.


이러한 API 통합은 애플리케이션에 필수적이지만 실패하면 어떻게 됩니까? 통합을 실패로부터 보호하기 위해 취할 수 있는 몇 가지 조치에 대해 이전에 여기에 작성했습니다. Bearer에서는 성능을 모니터링하고, 문제를 알리고, 앱이 의존하는 API의 문제를 자동으로 해결하는 완벽한 솔루션을 구축하고 있습니다. Bearer에 대해 자세히 알아보고 오늘 사용해보십시오.