자바스크립트 코드 짜는 법좀 제발 도와주세요 ㅠㅠ
조회수 1536회
안녕하세요, 자바스크립트 배운지 2주된 완전 초보인데요 ㅠㅠ 학원에서 과제를 내줬어요. 제가 3일동안 생각하고 try해봤는데 제가 아직 function도 잘못짜서 도저히 하지를 못하겠어요. 우선 json에 데이터가 있고, 그 데이터를 js 옮긴다음에 그 데이터를 바탕으로 테이블 표를 만들었어요. 예를들어, 이름:레오넬 소속: 바르셀로나 포지션: 공격 이름 :호날두 소속 : 레알마드리드 포지션 공격 이름 손흥민 소속 토트넘 포지션 공격 이런식으로 데이터들이 엄청 많은데, 그 테이블에 있는 데이터들을 예를들어 체크박스로 포지션 공격 미드필터 수비 소속 레알마드리드, 토트넘 바르셀로나 이런식으로 선택 할 수있게 해서 선택한 정보만 html에 보여지게 해야하는데 도대체 어떻게 해야할지 모르겠어요 ㅠㅠ 아무런 감이 잡히질 않아요 ㅠㅠ 제발 좀 도와주세요...
-
(•́ ✖ •̀)
알 수 없는 사용자
1 답변
-
댓글에 답변이 없네요... 데이터가 AJAX로 입력받고 이런 형태라고 가정하고 코드를 짜보았습니다.
[{"이름": "레오넬", "소속": "바르셀로나", "포지션": "공격"}, {"이름": "호날두", "소속": "레알마드리드", "포지션": "공격"}]
HTML (
index.html
)<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Question 5430</title> </head> <body> <p>소속</p> <select id="team" name="team"> <option value="tothnem">토트넘</option> <option value="rmadrid">레알마드리드</option> <option value="barcelona">바르셀로나</option> </select> <p>포지션</p> <select id="position" name="position"> <option value="attack">공격</option> <option value="defense">수비</option> </select> <button type="button" id="getData">데이터 가져오기</button> <p id="result"></p> <script src="index.js"></script> </body> </html>
JavaScript (
index.js
)function showData() { var xhttp = new XMLHttpRequest(); var url = "data.json"; xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { var text = ""; var data = JSON.parse(this.responseText); var teamControl = document.getElementById("team"); var positionControl = document.getElementById("position"); var selectedTeam = teamControl.options[teamControl.selectedIndex].text; var selectedPosition = positionControl.options[positionControl.selectedIndex].text; for (var i = 0; i < data.length; i++) { if (data[i]["소속"] == selectedTeam && data[i]["포지션"]) { text += data[i]["이름"]; text += " "; } } document.getElementById("result").innerText = text; } }; xhttp.open("GET", url, true); xhttp.send(); } document.getElementById("getData").onclick = showData;
-
(•́ ✖ •̀)
알 수 없는 사용자
-
댓글 입력