Javascript 搜索JSON并在HTML页面中显示结果

我试图搜索一个JSON文件并显示与我搜索的国家相匹配的JSON对象，是否可以用类似的方式进行搜索

我的HTML代码如下所示：

<h2 style="text-align:center">Search</h2>
  <input type="search" id="mySearch" placeholder="Country" style="width:50%">
  <button onclick="myFunction()" style="width:50%">Search</button>


  <div class="matches" id="results"></div>

  <div class="res">
    <div class="data" id="score"></div>
    <div class="data" id="type"></div>
    <div class="data" id="country"></div>
  </div>

---

虽然console.log显示每个结果，变量matches显示正确的数字，但HTML页面仅显示最后一个结果。如何解决这个问题？

正如charlietfl所说，在循环的每次迭代中，您都会覆盖div内容的值

---

使用一个字符串构建分数、类型和国家，然后将结果字符串放入innerHTML中，很好，你想开始编码，爱你的社区成长！ 正如前面的评论所说。innerHTML将覆盖这些字段。但是评论中没有提出的是解决你问题的方法。所以这里有一个建议。您可以使用createElement创建新的HTML标记并将其附加到DOM中

祝你好运和快乐

风险值数据=[ { 得分：3分， 类型：类型， 国家：挪威， }, { 得分：5分， 类型：类型2， 国家：瑞典， }, { 得分：9分， 类型：类型2， 国家：挪威， }, ]; 函数myFunction{ var x=document.getElementByIdmySearch.value； var匹配=0； 对于数据中的var i{ ifx==数据[i]。国家{//检查数据是否与搜索匹配 匹配+=1；//将每个结果的结果数添加1 document.getElementByIdresults.innerHTML=Results:+matches；//将匹配数设置为字符串并发送到html console.logdata[i].分数； var score=document.createElementDIV； score.innerHTML=score:+data[i].score； document.body.appendChildscore； var type=document.createElementDIV； type.innerHTML=type:+data[i].type； document.body.appendChildtype； var country=document.createElementDIV； country.innerHTML=国家：+data[i]。国家； document.body.document国家/地区； } } } 搜索 搜索

---

你在说什么？数据对象？预期结果是什么？每次迭代都会覆盖这些元素的innerHTML，这就是为什么您只看到最后一个元素的原因我希望您的JavaScript文件不是这样的，因为它是无效的。@nick zoum是的，我说的是数据对象。如果不清楚，我很抱歉这真的很有帮助，谢谢。当我尝试将背景应用于DIV时，所有行之间都有间隙，但没有背景。是否可以在每个搜索结果中添加一个类，使间隙仅出现在搜索结果之间，而不是每行之间？

var data = [{[{
   "score": 3,
   "type": "type",
   "country": "Norway",
 }..etc
}]; 

function myFunction() {
    var x = document.getElementById("mySearch").value;
    var matches = 0;

    for (var i in data) {
        if(x == data[i].country){ //Check if data match the search
          matches += 1; //Add 1 to the number of results per result
          document.getElementById("results").innerHTML ="Results: " + matches; //Make number of matches a string and send to html
          console.log(data[i].score);
          document.getElementById("score").innerHTML = "Score: " + data[i].score;
          document.getElementById("type").innerHTML = "Type: " + data[i].type;
          document.getElementById("country").innerHTML = "Country: " + data[i].country;
        }
    }
  }