我如何告诉javascript给我从JSON中选择的信息[关闭]答案

【问题标题】：How do i tell javascript to give me selected info from JSON [closed]我如何告诉javascript给我从JSON中选择的信息[关闭]
【发布时间】：2017-12-01 14:27:31
【问题描述】：

    [
    { "id":"1","firstName":"John", "lastName":"Doe","role":"engineer","age":"25" },
    { "id":"2","firstName":"Jax", "lastName":"Ali","role":"Software engineer","age":"35" },
    { "id":"3","firstName":"Suz", "lastName":"Ibra","role":"Developer","age":"23"},
    { "id":"4","firstName":"Alia", "lastName":"Arnold","role":"UX Designer","age":"28"},
    { "id":"5","firstName":"Jack", "lastName":"Jones","role":"Programmer","age":"37"}
]

    <html>
    <head>
    <meta charset="utf-8" />
    <title>Testside</title>
    <script>
        window.onload = oppstart;

        var laster; //xmlhttp

        var person;

        function oppstart() {
            laster = new XMLHttpRequest();

            var filnavn = "data.json" +"?id="+Math.random();
            //alert(filnavn);
            laster.open("GET",filnavn,true);
            laster.onreadystatechange = ferdigLastet;
            laster.send();
        }


        function ferdigLastet() {

            if(laster.readyState === 4 && laster.status === 200) {

                person = JSON.parse(laster.responseText);

                for (var i = 0; i < person.length; i++) {
                    document.getElementById("nedtrekk").innerHTML+= "<option value='" + person[i].id +"'>" + person[i].firstName +"</option>"

                    }
                }


            }




    </script>

    </head>
    <body>
    <select name="id" id="nedtrekk">
    </select>
    <p id="utskrift"></p>

    </body>
    </html>

如何告诉我的代码从选定的选项列表名称中获取信息？因此，如果我从选项列表中选择 JACK，我希望我的代码从我的 JSON 文件中提供他的信息。它目前给我的是选项值，而不是我的<p> 标签中的信息

【问题讨论】：

我很困惑，你说if i select JACK from my option list i want my code to give me his information from my JSON file. What it currently gives me is the option values but not the information in my <p> tag - 我看不到任何当前在进行选择时检索任何信息的代码。那个代码在哪里？为什么您希望<p> 标签成为您选择的一部分？它位于选择的外部。我迷路了。
@Fran 基本上我有一个选项列表 atm。它为我提供了 JSON 文件中的名称。我想让我的 javascript 将有关所选 Person 的所有信息打印到我的 p 标签中。
获取选定的值 ► stackoverflow.com/questions/1085801/… - 通过 Id 从 JSON 获取对象 ► stackoverflow.com/questions/7364150/…

标签： javascript json loops option

【解决方案1】：

您可以将 stringified 对象本身保存为值，并在 change 事件上显示相同

selectBox.addEventListener( "change", function(){
   var data = JSON.parse(this.value);
   document.getElementById( "utskrift" ).innerHTML = Object.keys( data ).map( function ( key ){
       return "<div>" + key + " - " +  data[ key ] + "</div>"
   }).join( "" );
})

演示

var arr =  [
    { "id":"1","firstName":"John", "lastName":"Doe","role":"engineer","age":"25" },
    { "id":"2","firstName":"Jax", "lastName":"Ali","role":"Software engineer","age":"35" },
    { "id":"3","firstName":"Suz", "lastName":"Ibra","role":"Developer","age":"23"},
    { "id":"4","firstName":"Alia", "lastName":"Arnold","role":"UX Designer","age":"28"},
    { "id":"5","firstName":"Jack", "lastName":"Jones","role":"Programmer","age":"37"}
];

var selectBox = document.getElementById( "nedtrekk" );
selectBox.innerHTML = arr.map( s => "<option value='" + JSON.stringify( s )  + "'>" + s.firstName + "</option>" ).join( "" );

selectBox.addEventListener( "change", function(){
   var data = JSON.parse(this.value);
   document.getElementById( "utskrift" ).innerHTML = Object.keys( data ).map( function ( key ){
       return "<div>" + key + " - " +  data[ key ] + "</div>"
   }).join( "" );
})

<select name="id" id="nedtrekk"></select>
<p id="utskrift"></p>

【讨论】：

这似乎是一种非常先进的方法，我对编程很陌生。有没有更简单的方法？
@SuzdarIbrahim 这应该不会太复杂，请分享您对此代码的困惑。
我从来没有用过 eventListeners 也不知道它是做什么用的
@SuzdarIbrahim 在这种情况下，现在是开始 developer.mozilla.org/en-US/docs/Web/API/EventTarget/… 的好时机
@SuzdarIbrahim 在您研究解决您的问题的解决方案期间，您没有遇到addEventListener...

【解决方案2】：

你需要一个 for 循环来迭代你的 json 和一个检查 x 值是否等于 x 值的语句，将其推送到 for 循环之外声明的变量中。

例如：

var json = [
  {
    "name": "Maria",
    "age": 14
  },
  {
    "name": "Jacob",
    "age": 24
  },
  {
    "name": "David",
    "age": 36
  }
];

var extract = [];
for(var i = 0; i < json.length; i++){
  if(json[i].name == "Maria"){
    extract = json[i];
  }
}

alert(JSON.stringify(extract));

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：

【解决方案3】：

您可以使用 jquery，这样在 json 文件中搜索非常简单：

<select onClick="myFunction" id="myselect">
   <option onClick="myFunction" value='" + person[i].id +"'>" + person[i].firstName +"</option>
</select>

然后你像这样调用你的jQuery：

var data = [
    { "id":"1","firstName":"John", "lastName":"Doe","role":"engineer","age":"25" },
    { "id":"2","firstName":"Jax", "lastName":"Ali","role":"Software engineer","age":"35" },
    { "id":"3","firstName":"Suz", "lastName":"Ibra","role":"Developer","age":"23"},
    { "id":"4","firstName":"Alia", "lastName":"Arnold","role":"UX Designer","age":"28"},
    { "id":"5","firstName":"Jack", "lastName":"Jones","role":"Programmer","age":"37"}
]

myFunction(){
  var userId = $( "#myselect" ).val();
  for(var i = 0 ; i < data.length;i++){
      if(userID == data[i].id){
         alert(data[i])
       }
   }
}

【讨论】：