Javascript 单击按钮时输出特定的JSON

我有一些JSON，我正在用它来试验欧几里德相似性，作为迈向机器学习的一小步。我用HTML和CSS创建了一些按钮，但我需要一种方法将JSON的某些部分附加到每个按钮上。你可以在

similarity

函数中看到我在这方面相当可怜的尝试。万一我说得不够具体，那就让我谈细节吧；例如，对于电影《敦刻尔克》，我希望在单击该按钮时显示敦刻尔克的对象。对于脑震荡，我希望显示脑震荡对象。。。等等

<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>

---

在

单击
提交
之后，您正在将
单击
侦听器附加到
div
。而是将侦听器连接到
divs


let数据=[
{
“名称”：“敦刻尔克”，
“行动”：7，
“悬念”：9，
"戏剧":五,，
"性格":二,，
“浪漫”：空，
“喜剧”：无效，
“科幻”：空，
“利益因素”：7
},
{
“姓名”：“脑震荡”，
“动作”：空，
“悬念”：7，
“戏剧”：8，
"字":9,，
“浪漫”：3，
“喜剧”：无效，
“科幻”：空，
“利益因素”：10
},
{
“名称”：“独立日：复兴”，
“行动”：9，
"悬念":6,，
"戏剧":三,，
"性格":6,，
“浪漫”：2，
“喜剧”：无效，
“科幻”：9，
“利益因素”：5
},
{
“姓名”：“自由独唱”，
“行动”：3，
“悬念”：10，
“戏剧”：10，
"性格":8,，
“浪漫”：空，
“喜剧”：无效，
“科幻”：空，
“利益因素”：10
}
];
const movies=document.querySelectorAll（'.movie'）；
电影。forEach（（电影）=>{
movie.addEventListener（'click'，function（）{
const movieName=this.children[0].textContent；
const found=data.find（（{name}）=>name.toLowerCase（）==movieName.toLowerCase（））；
如果（找到）{console.log（找到）；}
});
});

敦刻尔克
脑震荡
独立性
自由独奏
提交
我将介绍一些稍有不同的内容，并为您提供一些函数，您可以使用这些函数在对象数组中查找内容（我删除了数组中的数组，制作了一个简单的对象数组）。
lookup
返回一个数组（一个数组），而
lookupAll
返回数组中的所有匹配项。例如，这将允许您查找“悬念”为6等的位置。
注意：我使用
数据名称
来轻松匹配名称，您可以对任何或所有属性进行匹配

这也适用于几乎所有的浏览器，包括像IE6这样的超旧浏览器


var myApp=myApp | |{}；
myApp.funcs={
indexOf:函数（myArray、searchTerm、属性）{
对于（var i=0；i{
el.addEventListener（'click'，myApp.funcs.movieFunc）；
});
函数相似性（）{
console.log（“它工作了”）；
};
电影{
高度：2米；
宽度：20em；
边框：纯色1px蓝色；
}
.电影：悬停{
背景颜色：浅灰色；
光标：指针；
}
#结果{
边框：固体石灰1px；
}
#提交{
高度：2米；
宽度：20em；
背景色：#bbbbbb；
}
#提交：悬停{
边框：纯色1px蓝色；
光标：指针；
}

敦刻尔克
脑震荡
独立性
自由独奏
提交
 
为什么对象嵌套在两个数组中？i:e外部数组，然后是每个单独对象的数组。我看不到按钮按钮在哪里？我看见迪夫rather@randomSoul所以我可以很容易地通过JSON建立索引，我本可以花更多的时间考虑格式，但我对JSON没有太多经验。@ShoyebSheikh 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");
};