javascript - 单击按钮时输出特定的 JSON

Question

我有一些 JSON，我正在使用它来试验欧几里德相似度，作为迈向机器学习的第一步。我有一些用 HTML 和 CSS 创建的按钮，但我需要一种方法将我的 JSON 的某些部分附加到每个按钮。您可以在 similarity 函数中看到我对此的相当可怜的尝试。如果我不够具体，请让我深入了解细节；例如，对于电影敦刻尔克，我希望在单击该按钮时显示敦刻尔克 的对象。对于Concussion，我希望显示Concussion 的对象...等等。

<div id="dunk" class="movie">
        <div class="text">Dunkirk</div>
    </div>
    <div id="conc" class="movie">
        <div class="text">Concussion</div>
    </div>
    <div id="indep" class="movie">
        <div class="text">Independence</div>
    </div>
    <div id="freesolo" class="movie">
        <div class="text">Free Solo</div>
    </div>
    <div id="submit">
        <div id="text">Submit</div>
    </div>

.movie {
    height:50px;
    width:80px;
    background-color:grey;
}

.movie:hover {
    background-color:lightgrey;
    cursor:pointer;
}

#submit {
    height:50px;
    width:80px;
    background-color:black;
}

#submit:hover {
    background-color:darkgrey;
    cursor:pointer;
}

let data = 
    [
        [{
            "name": "Dunkirk",
            "action": 7,
            "suspense": 9,
            "drama": 5,
            "character": 2,
            "romance": null,
            "comedy": null,
            "sci-fi": null,
            "interestFactor": 7
        }],
        [{
            "name": "Concussion",
            "action": null,
            "suspense": 7,
            "drama": 8,
            "character": 9,
            "romance": 3,
            "comedy": null,
            "sci-fi": null,
            "interestFactor": 10
            }],
        [{
            "name": "Independence Day: Resurgence",
            "action": 9,
            "suspense": 6,
            "drama": 3,
            "character": 6,
            "romance": 2,
            "comedy": null,
            "sci-fi": 9,
            "interestFactor": 5
            }],
        [{
            "name": "Free Solo",
            "action": 3,
            "suspense": 10,
            "drama": 10,
            "character": 8,
            "romance": null,
            "comedy": null,
            "sci-fi": null,
            "interestFactor": 10
        }]

    ];

let jString = JSON.stringify(data);
let parseData = JSON.parse(jString);
console.log(parseData[0][0]);

let options = document.querySelectorAll(".movie");
let submit = document.getElementById("submit");

submit.addEventListener('click', similarity);

function similarity(){
    options.forEach((el) => {
        el.addEventListener('click', function(ev){
            console.log(parseData[el][el].name);
        });
    });
    console.log("it worked");
};

Answer 1

在 click submit 之后，您将 click 监听器附加到 div。而是将监听器附加到div.

let data = [
    {
        "name": "Dunkirk",
        "action": 7,
        "suspense": 9,
        "drama": 5,
        "character": 2,
        "romance": null,
        "comedy": null,
        "sci-fi": null,
        "interestFactor": 7
    },
    {
        "name": "Concussion",
        "action": null,
        "suspense": 7,
        "drama": 8,
        "character": 9,
        "romance": 3,
        "comedy": null,
        "sci-fi": null,
        "interestFactor": 10
        },
    {
        "name": "Independence Day: Resurgence",
        "action": 9,
        "suspense": 6,
        "drama": 3,
        "character": 6,
        "romance": 2,
        "comedy": null,
        "sci-fi": 9,
        "interestFactor": 5
        },
    {
        "name": "Free Solo",
        "action": 3,
        "suspense": 10,
        "drama": 10,
        "character": 8,
        "romance": null,
        "comedy": null,
        "sci-fi": null,
        "interestFactor": 10
    }
];

const movies = document.querySelectorAll('.movie');

movies.forEach((movie) => {
    movie.addEventListener('click', function() {
        const movieName = this.children[0].textContent;
        const found  = data.find(({name}) => name.toLowerCase() === movieName.toLowerCase());
        if(found) {console.log(found);}
    });
});

<div id="dunk" class="movie">
    <div class="text">Dunkirk</div>
</div>
<div id="conc" class="movie">
    <div class="text">Concussion</div>
</div>
<div id="indep" class="movie">
    <div class="text">Independence</div>
</div>
<div id="freesolo" class="movie">
    <div class="text">Free Solo</div>
</div>
<div id="submit">
    <div id="text">Submit</div>
</div>

或者你可以使用includes，因为div中的text与电影名并不完全相似。示例 - 独立日:复兴。

let data = [
    {
        "name": "Dunkirk",
        "action": 7,
        "suspense": 9,
        "drama": 5,
        "character": 2,
        "romance": null,
        "comedy": null,
        "sci-fi": null,
        "interestFactor": 7
    },
    {
        "name": "Concussion",
        "action": null,
        "suspense": 7,
        "drama": 8,
        "character": 9,
        "romance": 3,
        "comedy": null,
        "sci-fi": null,
        "interestFactor": 10
        },
    {
        "name": "Independence Day: Resurgence",
        "action": 9,
        "suspense": 6,
        "drama": 3,
        "character": 6,
        "romance": 2,
        "comedy": null,
        "sci-fi": 9,
        "interestFactor": 5
        },
    {
        "name": "Free Solo",
        "action": 3,
        "suspense": 10,
        "drama": 10,
        "character": 8,
        "romance": null,
        "comedy": null,
        "sci-fi": null,
        "interestFactor": 10
    }
];

const movies = document.querySelectorAll('.movie');

movies.forEach((movie) => {
    movie.addEventListener('click', function() {
        const movieName = this.children[0].textContent;
        const found  = data.filter(({name}) => name.toLowerCase().includes(movieName.toLowerCase()));
        if(found.length > 0) {console.log(found[0]);}
    });
});

<div id="dunk" class="movie">
    <div class="text">Dunkirk</div>
</div>
<div id="conc" class="movie">
    <div class="text">Concussion</div>
</div>
<div id="indep" class="movie">
    <div class="text">Independence</div>
</div>
<div id="freesolo" class="movie">
    <div class="text">Free Solo</div>
</div>
<div id="submit">
    <div id="text">Submit</div>
</div>