요약:

지난 3-4주 동안 JavaScript를 배운 사람으로서 JSON API 가져오기에서 DOM 조작을 통해 새로 생성된 요소에 이벤트 리스너를 추가하는 방법은 다음과 같습니다.

let databaseURL = '_**url of your json data file**_'
let areaInHTMLToAppend = document.querySelector('_**id or class of areaInHTMLToAppend**_')

function fetchData(){
 fetch(databaseURL)
 .then(resp => resp.json())
 .then(data => {
  appendData(data)
  addingEventListener()
 })
}

function appendData(array){
 array.forEach(data => {
  let fetchedData = document.createElement('div')
  fetchedData.className = 'fetched-data-class'
  fetchedData.innerHTML =`
   _**//HTML manipulation**_
  `
 areaInHTMLToAppend.appendChild(fetchedData)
 })
}

function addingEventListener(){
const newlyCreatedElements = document.querySelectorAll('.fetched-data-class')
newlyCreatedElements.forEach(element => {
 element.addEventListener('**_eventListener_**', _**callback**_)
})
}

function callback() => {
 **_console.log('x')_**
}

fetchData()

소개

오후 9시 27분이었고 내 코드의 기초와 API에서 데이터를 가져오고 이 새로운 데이터 집합으로 DOM을 조작하여 할당하는 방법을 설명하는 기술 코치와의 줌 세션을 막 마쳤습니다. .

짜릿했다! 나는 급히 배우자에게 달려가서 마침내 얻게 되었다고 말했습니다. 3주 후 모든 것이 클릭되면 코딩이 매우 쉽습니다.

나는 스스로 생각했다. 나는 천재인가봐, 몇 시간을 두고 긴장을 풀고 다시 집어들게 해줄게.

하지만 내 생각과 계획이 나를 괴롭히기 위해 돌아왔을 때 나는 거의 알지 못했다...

지금은 오전 2시 13분이었고 내 코드가 작동하지 않는 이유를 묻기 위해 컴퓨터에 머리를 부딪치고 있습니다. 데이터 조작이 정확하다고 완전히 생각했지만 중요한 부분이 누락되었습니다.

내 중대한 실수

array.forEach()가 함수가 아니라는 TypeError가 계속 발생했습니다...

내가 뭘 잘못했어? 어떡해? 내가 쓰고 있던 내 메모에는 이 TypeError가 없었습니다... Google에 무엇을 몰랐고 내 배열을 가져오고 반복하고 있는데 왜 작동하지 않습니까!?!? 나는 슬랙에서 Flatiron School 커뮤니티에 연락을 취했고 그것은 겸허한 경험이었습니다.

다음 날 어레이에 올바르게 액세스하지 못한다는 사실을 알게 되었습니다.

TypeError array.forEach()가 함수가 아닌 경우 현명한 조언이 있습니다.

반복하려는 ARRAY/OBJECT/DATA를 확인하십시오...

점 표기법으로 올바른 정보에 액세스하고 있습니까? 데이터베이스 전체를 가져오고 있습니까?

console.log()는 당신의 친구입니다.

위의 중요한 질문에 답하려면 console.log를 사용하십시오.

function fetchOngoingRecall(){
    fetch ('https://api.fda.gov/food/enforcement.json?limit=1000')
    .then(resp => resp.json())
    .then(data => {
        console.log(data)
    })
}

이제 데이터의 배열/객체가 실제로 있는 위치를 확인할 수 있습니다.

내 예에서 .json() 메서드에서 검색된 데이터에는 결과에 배열이 있습니다.



그렇다면 배열에 어떻게 액세스합니까?

점 표기법을 사용할 수 있습니다.

위의 예를 반복하려면 다음을 수행하십시오.

function fetchOngoingRecall(){
    fetch ('https://api.fda.gov/food/enforcement.json?limit=1000')
    .then(resp => resp.json())
    .then(data => {
        console.log(data)
        data.results.forEach(product =>{
            console.log(product)
        }
    })
}

이렇게 하면 배열에 액세스하고 올바른 데이터를 조작할 수 있습니다.

우리가 정말로 여기 있는 이유

이제 JSON API에서 가져온 DOM 조작 요소에 이벤트 리스너를 추가하는 방법에 대해 이야기해 보겠습니다.

다음은 DOM에 추가할 데이터를 조작하는 코드입니다.

let databaseURL = '_**url of your json data file**_'
let areaInHTMLToAppend = document.querySelector('_**id or class of areaInHTMLToAppend**_')

function fetchData(){
 fetch(databaseURL)
 .then(resp => resp.json())
 .then(data => {
  appendData(data)
 })
}

function appendData(array){
 array.forEach(data => {
  let fetchedData = document.createElement('div')
  fetchedData.className = 'fetched-data-class'
  fetchedData.innerHTML =`
   _**//HTML manipulation**_
  `
 areaInHTMLToAppend.appendChild(fetchedData)
 })
}

위의 코드에서 우리는 각 fetchedData에 대한 div를 만들고 .fetch-data-class를 할당했으며 각 fetchedData를 지정된 영역에 추가하여 areaInHTMLToAppend 변수를 추가했습니다.

className 할당은 이벤트 리스너를 추가하는 데 사용할 것이므로 중요합니다.

이벤트 리스너 추가

이벤트 리스너를 추가하는 쉬운 단계...

클래스 이름이 .fetched-data-class인 모든 새 div를 선택하는 변수를 생성하여 시작하겠습니다.

function addingEventListener(){
  const newlyCreatedElements = 
  document.querySelectorAll('.fetched-data-class')

새로 생성된 요소에 .addEventListener 메서드를 추가하고 싶을 것입니다.

그렇게 하면 newCreatedElements.addEventListener()가 함수가 아니라는 또 다른 TypeError가 발생합니다...

이전의 결정적인 실수로 돌아가 보겠습니다.

nodeList 또는 배열과 같은 객체에 이벤트 리스너를 추가할 수 없으며 반복해야 합니다.

해결책은 다음과 같습니다.

function addingEventListener(){
  const newlyCreatedElements = 
  document.querySelectorAll('.fetched-data-class')
  newlyCreatedElements.forEach(element => {
    element.addEventListener('**_eventListener_**', _**callback**_)
  })
}

우리는 forEach를 사용하여 nodeList를 살펴보고 각 요소에 이벤트 리스너를 추가해야 하며 모든 이벤트를 수신하고 원하는 콜백 함수를 만들 수 있습니다.

결론적으로

이 게시물이 코딩 여정에 도움이 되기를 바랍니다.

스스로 학습하는 경우 제가 드릴 수 있는 최고의 조언은 이 여정을 통해 도움을 줄 사람들의 커뮤니티를 구축하라는 것입니다.

저는 Flatiron School의 부트캠프에 참여하면서 소프트웨어 개발자가 되기 위한 여정을 통해 배우고 배울 수 있는 커뮤니티가 있다는 사실을 깨닫는 데 도움이 되었습니다. 갇힌!