Please help me with the JavaScript code crying

Hello, I'm a total beginner who has been learning JavaScript for 2 weeks The academy gave me the assignment. I tried it after thinking about it for 3 days, but I can't do it because I made a wrong function. First of all, there is data in json, and I moved the data to js and made a table table based on the data. For example, name: Leonel: Barcelona Position: Attack Name: Ronaldo: Real Madrid position attack Name Son Heung-min's Tottenham position attack There's a lot of data in this way, and the data on the table is, for example, a check box Position Attack Midfielder Defense Real Madrid, Tottenham, and Barcelona should be selected in this way so that only the selected information can be shown in HTML, but I don't know what to do crying I have no idea crying Please help me.

javascript

2022-09-22 19:23

1 Answers

There's no answer in the comments. We put together the code assuming that the data was entered into AJAX and this is the form.

[{"Name": "Leonel", "Parties": "Barcelona", "Position": "Attack"}, {"Name": "Ronaldo", "Parties": "Real Madrid", "Position": "Attacks"}]

HTML (index.html)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Question 5430</title>
    </head>
    <body>
        <p> Affiliated</p>
        <select id="team" name="team">
            <option value="tohnem">Tottenham</option>
            <option value="rmadrid">Real Madrid</option>
            <option value="barcelona">Barcelona</option>
        </select>
        <p>Position</p>
        <select id="position" name="position">
            <option value="attack">Attack</option>
            <option value="defence">Defense</option>
        </select>
        <Button type="Button" id="getData">Import Data</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]["affiliated"] == selectedTeam && data[i]["position"]) {
                    text += data[i]["Name"]
                    text += " ";
                }
            }
            document.getElementById("result").innerText = text;
        }
    };
    xhttp.open("GET", url, true);
    xhttp.send();
}

document.getElementById("getData").onclick = showData;

2022-09-22 19:23

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656