如何从JSON获得正确的值？

Question

我正在研究这个在JSON对象中找到人的简单搜索功能。这是我的代码：

var personas = [
    {
        "name": "Luis",
        "lastname": "Gomez",
        "age": 25
    },
    {
        "name": "Maria",
        "lastname": "Lopez",
        "age": 20
    },
    {
        "name": "Lucero",
        "lastname": "Perez",
        "age": 30
    },
    {
        "name": "Daniel",
        "lastname": "Ruiz",
        "age": 18
    },
    {
        "name": "Teresa",
        "lastname": "Ponce",
        "age": 23
    }
];

function myFunction(userInput){

  if (userInput.length == 0) { 
    document.getElementById("info").innerHTML = "";

  }else{
    for(var i in personas){
     if(personas[i].name === userInput){
      document.getElementById("info").innerHTML = "Found";
    }else{
      document.getElementById("info").innerHTML = "Not Found";
    }
  }
 }
}

<form >
Find person: <input type = "text" onkeyup="myFunction(this.value)"/>
</form>

<div id = "info"></div>

我的问题： 出于某种原因，如果我删除 else 语句：

else{
  document.getElementById("info").innerHTML = "Not Found";
}

我的程序将能够找到该人的姓名。但是，假设我输入“Luis”，然后删除“s”，最后的字符串会说“Lui”。然而，即使“Lui”不存在，我的程序仍然会说“Found”。希望有人可以告诉我我做错了什么。先谢谢你。

Answer 1

您可以使用find方法：

function myFunction(userInput){

  if (userInput.length == 0) { 
    document.getElementById("info").innerHTML = "";
  }else{
     var persona = personas.find(function(persona) {
         return persona.name === userInput;
     })

    if (persona) {
        document.getElementById("info").innerHTML = "Found";
    } else {
        document.getElementById("info").innerHTML = "Not Found";
   }
 }
}

问题：如果删除else语句，则在找不到名称时不会更新UI。

Answer 2

你不行。几个问题可能是：

1. 您使用nombre代替name
2. 如果一旦匹配name，就应该打破循环。
3. 您说明的问题可能是您使用onkeydown事件而不是onkeyup事件，但现在看起来很好。

运行代码在这里：

var personas = [
    {
        "name": "Luis",
        "lastname": "Gomez",
        "age": 25
    },
    {
        "name": "Maria",
        "lastname": "Lopez",
        "age": 20
    },
    {
        "name": "Lucero",
        "lastname": "Perez",
        "age": 30
    },
    {
        "name": "Daniel",
        "lastname": "Ruiz",
        "age": 18
    },
    {
        "name": "Teresa",
        "lastname": "Ponce",
        "age": 23
    }
];

function myFunction(userInput){

  if (userInput.length == 0) { 
    document.getElementById("info").innerHTML = "";

  }else{
    for(var i in personas){
     if(personas[i].name === userInput){
      document.getElementById("info").innerHTML = "Found";
       break;
    }else{
      document.getElementById("info").innerHTML = "Not Found";
    }
  }
 }
}

<form >
Find person: <input type = "text" onkeyup="myFunction(this.value)"/>
</form>

<div id = "info"></div>

Answer 3

您还可以使用匹配的元素构建一个数组，并测试结果数组是否为空：

var personas = [
    {
        "name": "Luis",
        "lastname": "Gomez",
        "age": 25
    },
    {
        "name": "Maria",
        "lastname": "Lopez",
        "age": 20
    },
    {
        "name": "Lucero",
        "lastname": "Perez",
        "age": 30
    },
    {
        "name": "Daniel",
        "lastname": "Ruiz",
        "age": 18
    },
    {
        "name": "Teresa",
        "lastname": "Ponce",
        "age": 23
    }
];
function myFunction(userInput){
  if (userInput.length == 0) 
    document.getElementById("info").innerHTML = "";
  else {
    if (personas.filter(x => x.name === userInput).length > 0)  
      document.getElementById("info").innerHTML = "Found";
    else 
      document.getElementById("info").innerHTML = "Not Found";
  }
}

<form >
Find person: <input type = "text" onkeyup="myFunction(this.value)"/>
</form>

<div id = "info"></div>

Answer 4

让我们看看当你写下else陈述时会发生什么。

1. 您输入 L ，myFunction被调用，其中userInput="L"它不满足if语句，因此没有任何反应。
2. 您输入你，myFunction被调用，userInput="Lu"它不满足if语句，因此没有任何反应。
3. 您输入我，myFunction被调用，userInput="Lui"它不满足if语句，因此没有任何反应。
4. 您输入 s ，myFunction被调用，其中userInput="Luis"满足if语句，因此Found显示在info中} div。
5. 您删除 s ，myFunction被调用，userInput="Lui"它不满足if语句，因此没有任何反应。

但等等，info div呢？如果没有else声明，则无法更改innerHTML div的info。因此，由于步骤4，它会继续显示Found。

您可以使用调试器并设置断点来自行尝试。