Question

    [
    { "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>标记

中的信息

Answer 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( "" );
})

<强>演示

＆＃13;

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( "" );
})

＆＃13;

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

＆＃13;

Answer 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));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 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])
       }
   }
}

我如何告诉javascript给我从JSON中选择的信息

3 个答案: