在JSON文件中查找元素并以HTML格式显示

时间:2015-03-28 20:05:50

标签: javascript json

我有以下JSON文件

{
    "agenti":[
    {"codice":"3425", "nome":"fabrizio", "cognome":"mazzeini", "azienda":"kra", "indirizzo": {"via":"via milano", "citta":"Roma","stato":"Italia"}},
    {"codice":"3476", "nome":"marco", "cognome":"sormani", "azienda":"bertucci", "indirizzo": {"via":"via Siena", "citta":"Milano" , "stato":"Italia"}},
    {"codice":"4525", "nome":"francesco", "cognome":"stefanucci", "azienda":"ovs", "indirizzo": {"via":"via italia", "citta":"Milano" , "stato":"Italia"}},
    {"codice":"3405", "nome":"emilio", "cognome":"emiglietti", "azienda":"paoletti", "indirizzo": {"via":"via delle forze armate", "citta":"Milano" , "stato":"Italia"}},
    {"codice":"3915", "nome":"gianni", "cognome":"sperti", "azienda":"giacomazzi", "indirizzo": {"via":"via quarenghi", "citta":"Milano" , "stato":"Italia"}},
 {"codice":"3429", "nome":"franca", "cognome":"solari", "azienda":"apple", "indirizzo": {"via":"via dei missaglia", "citta":"Milano" , "stato":"Italia"}}
]}

以下HTML / JS文件

<html>
  <head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  </head>
  <body>
    <h1>JSON</h1>
    <button id="es" type="button" onclick="testJSON()"> UPLOAD JSON </button>
    Search for agenti per <br> <br>
    Nome<input type="text" id="nome"> <br><br>
    <button type="button" id="filtra" onclick="filter()"> Filter </button>
    <p id="demo"> </p>
    <script>
var agenti = "";
    function testJSON() 
    {
      var successo = function(result) {
      console.log("success");
      console.log(result);
      agenti = result;
    };
    var error = function (error) {
      console.log(error);
    };
    $.ajax ({
      dataType: "json",
      url: "agenti.json",
      success: successo,
      error: error
    });
    var a = 10; 
  }
    </script>
    <script>
    function filter() {
      var name = document.getElementById("nome").value;
for (var i=0; i < agenti.length; i++) {
  if (agenti[i].nome === nome) {
    document.getElementById("demo").innerHTML = name;
  }
}
    }
    </script>
  </body>
</html>

我在输入框中填写“fabrizio”例如......但是HTML不会返回任何值,也不会将“fabrizio”打印为JSON文件中的找到元素... 但如果我这样做的话:

 <script>
var name = document.getElementById("nome").value;
document.getElementById("demo").innerHTML = name;
    function filter() {
for (var i=0; i < agenti.length; i++) {
  if (agenti[i].nome === nome) {

  }
}
}
</script>

我用随意名称填写输入框,HTML返回文档中的名称(并打印出来),即使JSON文件中没有该名称

我猜问题出现在for循环中,恰好在if条件

我该怎么办?感谢大家

2 个答案:

答案 0 :(得分:2)

你有:

agenti = result;

因此,在该数据结构中,您必须转到:

agenti.agenti[0].nome

获取结果。 agenti设置为整个封装对象,您需要第一个对象agenti。我显然会将你的变量改为不那么混乱。

答案 1 :(得分:0)

你在那里犯了两个错误。首先将JSON对象键与Javascript变量混合,这显然导致了混淆。另外,像Mark指出的那样,您已将结果包装在变量agenti中。我做了JSFiddle所有事情都在发挥作用。如果您有更多问题,请随时发表评论。你做的基本上是:

var name = document.getElementById("nome").value;
for (var i = 0; i < agenti.agenti.length; i++) {
    if (agenti.agenti[i].nome === name) {
        document.getElementById("demo").innerHTML = agenti.agenti[i].nome + ' & ' + agenti.agenti[i].codice;
    }
}


OLD ANSWER

变量&#34; nome&#34;未被宣布,&#34;名称&#34;是

if (agenti[i].nome === name) {}

&#34;诺姆&#34;我想是你在JSON文件和HTML DOM中输入的拼写错误。你应该纠正这个。

此外,您不必为两个功能创建两个脚本标记。只需将它们放入第一个脚本标记即可。