자바스크립트 코드 짜는 법좀 제발 도와주세요 ㅠㅠ

조회수 1525회

안녕하세요, 자바스크립트 배운지 2주된 완전 초보인데요 ㅠㅠ 학원에서 과제를 내줬어요. 제가 3일동안 생각하고 try해봤는데 제가 아직 function도 잘못짜서 도저히 하지를 못하겠어요. 우선 json에 데이터가 있고, 그 데이터를 js 옮긴다음에 그 데이터를 바탕으로 테이블 표를 만들었어요. 예를들어, 이름:레오넬 소속: 바르셀로나 포지션: 공격 이름 :호날두 소속 : 레알마드리드 포지션 공격 이름 손흥민 소속 토트넘 포지션 공격 이런식으로 데이터들이 엄청 많은데, 그 테이블에 있는 데이터들을 예를들어 체크박스로 포지션 공격 미드필터 수비 소속 레알마드리드, 토트넘 바르셀로나 이런식으로 선택 할 수있게 해서 선택한 정보만 html에 보여지게 해야하는데 도대체 어떻게 해야할지 모르겠어요 ㅠㅠ 아무런 감이 잡히질 않아요 ㅠㅠ 제발 좀 도와주세요...

  • (•́ ✖ •̀)
    알 수 없는 사용자
  • 데이터 예시를 보여 주시면 좋을 것 같아요. JSON 데이터가 [{"이름": "레오넬", "소속": "바르셀로나", "포지션": "공격"}, {"이름": "호날두", "소속": "레알마드리드", "포지션": "공격"}] 처럼 되어 있나요? 알 수 없는 사용자 2018.4.7 00:30
  • 데이터가 어떻게 입력되는지는 모르겠는데 JSON.parse()를 사용하면 JSON을 자바스크립트 오브젝트로 바꿀 수 있어요 알 수 없는 사용자 2018.4.7 00:34
  • 데이터는 AJAX로 입력되나요? 알 수 없는 사용자 2018.4.7 00:34

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;
    
    • (•́ ✖ •̀)
      알 수 없는 사용자
    • 정말 감사합니다. 진짜 생명에 은인이세요!!!!! ㅠㅠ 정말 감사합니다. 코드 보고 열심히 공부할게요~ 복받으실거에용!! 알 수 없는 사용자 2018.4.9 06:27

답변을 하려면 로그인이 필요합니다.

프로그래머스 커뮤니티는 개발자들을 위한 Q&A 서비스입니다. 로그인해야 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)