코딩 및 가져오기 API를 사용한 소개팅
8502 단어 apijavascript
코딩은 내가 항상 매우 틈새 시장이라고 느꼈던 것입니다. 온라인에서 JavaScript 스니펫을 볼 수 있으며 완전히 다른 알파벳을 가진 완전히 새로운 언어처럼 보입니다. 나는 이것이 내 인생의 다른 즐거움을 희생하고 완전히 낯선 것을 배우는 데 완전히 뛰어들 것이라는 것을 알고 있었지만, 퍼즐 중심의 마음가짐은 이 새로운 세계로 뛰어들기로 결정하도록 나를 밀어붙였습니다.
몇 달 동안 코딩과 JavaScript의 기초를 배우면서 반응적이고 반응이 빠른 것을 만들기 위해 코드를 결합하는 기술을 진정으로 마스터하고 싶었습니다. API는 제 첫 웹사이트를 만들 때 가장 흥미로웠던 것이 빠르게 되었습니다. 매일의 스포츠 이벤트, 날씨, 점성술 정보 및 정말 끝없는 양의 기타 정보와 같은 것을 지속적으로 업데이트하기 위해 외부 소스에서 데이터를 가져올 수 있다는 것은 미래 이벤트에 대한 많은 아이디어로 이어질 수 있습니다. 코드에 대해 알기 전에는 각 호스트가 이 데이터를 자체적으로 채우거나 생성해야 한다고 생각했지만 API는 기본 웹 개발자에게 외부 정보를 제공하여 더 많은 기회를 창출합니다.
이제 제가 빨리 알게 된 것은 대부분의 API가 특별히 필요하다고 생각하는 것보다 훨씬 더 많은 정보를 전달한다는 것입니다. 그러나 특정 데이터(이 경우 객체)를 호출할 수 있다는 것이 지금까지 극복해야 할 가장 큰 과제였습니다. 따라서 API에서 특정 데이터 집합을 올바르게 호출하는 방법을 분석해 보겠습니다. 예를 들어 첫 번째 API 가져오기 요청을 살펴보겠습니다.
fetch('https://sportspage-feeds.p.rapidapi.com/games?odds=spread&league=MLB', options)
.then(response => response.json())
.then(response => {
//console.log(response);
response.results.forEach(finalGame => { currentTeams(finalGame) })
})
// details.innerHTML = JSON.stringify(response);
const currentTeams = (finalGame) => {
const teams = document.createElement("p");
teams.innerHTML = finalGame.teams.away.team + ' @ ' + finalGame.teams.home.team;
scheduleBar.append(teams);
teams.addEventListener('click', () => {
//console.log(finalGame);
renderDetails(finalGame);
})
}
const renderDetails = (finalGame) => {
//const element = document.createElement("div");
//console.log(gameDetails(finalGame));
//console.log(finalGame);
const details = document.querySelector('#details');
details.innerHTML = finalGame.details.seasonType;
const odds = document.querySelector('#odds');
odds.innerHTML = finalGame.odds[0].spread.current.awayOdds + ' ' + finalGame.odds[0].spread.current.homeOdds;
const teams = document.querySelector('#teams');
teams.innerHTML = finalGame.teams.away.team + ' @ ' + finalGame.teams.home.team;
const venue = document.querySelector('#venue');
venue.innerHTML = finalGame.venue.name;
const gameTime = document.querySelector('#schedule');
gameTime.innerHTML = finalGame.schedule.date;
let todaysGame = new Date(finalGame.schedule.date);
//console.log(finalGame.schedule.date, todaysGame);
gameTime.innerHTML = todaysGame.toLocaleDateString('en-EN') + ' ' + todaysGame.toLocaleTimeString('en-EN');
const gameStatus = document.querySelector('#status');
gameStatus.innerHTML = finalGame.status;
if (finalGame.scoreboard) {
const currentScore = document.querySelector('#score');
currentScore.innerHTML = finalGame.scoreboard.score.away + ' - ' + finalGame.scoreboard.score.home;
}
{
"status": 200,
"time": "2022-09-20T13:19:57.022Z",
"games": 1,
"skip": 0,
"results": [
{
"schedule": {
"date": "2022-02-13T23:30:00.000Z",
"tbaTime": false
},
"summary": "Los Angeles Rams @ Cincinnati Bengals",
"details": {
"league": "NFL",
"seasonType": "postseason",
"season": 2021,
"conferenceGame": false,
"divisionGame": false
},
"status": "final",
"teams": {
"away": {
"team": "Los Angeles Rams",
"location": "Los Angeles",
"mascot": "Rams",
"abbreviation": "LAR",
"conference": "NFC",
"division": "West"
},
"home": {
"team": "Cincinnati Bengals",
"location": "Cincinnati",
"mascot": "Bengals",
"abbreviation": "CIN",
"conference": "AFC",
"division": "North"
}
},
"lastUpdated": "2022-02-14T03:02:18.640Z",
"gameId": 278943,
"odds": [
{
"spread": {
"open": {
"away": -4,
"home": 4,
"awayOdds": -110,
"homeOdds": -115
},
"current": {
"away": -4,
"home": 4,
"awayOdds": -110,
"homeOdds": -110
}
},
"moneyline": {
"open": {
"awayOdds": -193,
"homeOdds": 166
},
"current": {
"awayOdds": -196,
"homeOdds": 168
}
},
"total": {
"open": {
"total": 49.5,
"overOdds": -110,
"underOdds": -110
},
"current": {
"total": 48.5,
"overOdds": -110,
"underOdds": -110
}
},
"openDate": "2022-01-31T13:46:07.823Z",
"lastUpdated": "2022-02-13T23:23:16.272Z"
}
],
"venue": {
"name": "SoFi Stadium",
"city": "Inglewood",
"state": "CA",
"neutralSite": true
},
"scoreboard": {
"score": {
"away": 23,
"home": 20,
"awayPeriods": [
7,
6,
3,
7
],
"homePeriods": [
3,
7,
10,
0
]
},
"currentPeriod": 4,
"periodTimeRemaining": "0:00"
}
},
{
"schedule": {
"date": "2022-02-13T19:00:00.000Z",
"tbaTime": false
},
"summary": "Atlanta Hawks @ Boston Celtics",
"details": {
"league": "NBA",
"seasonType": "regular",
"season": 2021,
"conferenceGame": true,
"divisionGame": false
},
"status": "final",
"teams": {
"away": {
"team": "Atlanta Hawks",
"location": "Atlanta",
"mascot": "Hawks",
"abbreviation": "ATL",
"conference": "Eastern",
"division": "Southeast"
},
"home": {
"team": "Boston Celtics",
"location": "Boston",
"mascot": "Celtics",
"abbreviation": "BOS",
"conference": "Eastern",
"division": "Atlantic"
}
가져올 특정 데이터를 선택하는 것은 가져오려는 키에 도달하는 것입니다. 모든 개별 키를 사용하여 각 개체를 분해하면 정말 훨씬 쉬워집니다. 단일 문자열 값으로 채우기 위해 야구 경기에서 홈 팀과 원정 팀을 개별적으로 끌어오는 최근 프로젝트의 예를 분석하겠습니다. 이를 분석하기 위해 (finalGame)은 다음 API의 JSON 응답을 참조합니다. "결과". 이러한 결과가 나오면 간단히 키를 분해하고...
finalGame.teams.away.team + ' @ ' + finalGame.teams.home.team;위에서 우리는 원정 팀과 홈 팀의 각 개별 키를 개별적으로 입력하고 두 번째 팀이 홈 팀임을 보여주기 위해 '@' 값이 있는 문자열로 가져오고 있으며 여기서 게임이 "중"에 있습니다. .
이해하기 쉽기를 바라며, 이것은 API에 액세스하는 기능에 대한 나의 첫 번째 기술 소개이자 나 자신과 코딩 방법을 배우기 위한 나의 최근 노력에 대한 약간의 소개입니다.
Reference
이 문제에 관하여(코딩 및 가져오기 API를 사용한 소개팅), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/paolomgarcia/a-blind-date-with-coding-fetching-apis-4bne텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
