How do i tell javascript to give me selected info from JSON

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>

How do i tell my code to get information from the selected option list name? So 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

I'm very confused, you say `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
tag` - I cannot see any code that **currently** retrieves any information upon making a selection. Where is that code? and why would you expect the `
` tag to be part of your option? It sits external to the select. I'm lost. — Nope, Dec 01 '17 at 14:46
@Fran Basically i have a option list atm. And it gives me the names from my JSON file. And i want to make my javascript print out all the information about the selected Person into my p tag. — Suzdar Ibrahim, Dec 01 '17 at 14:49
Get selected value ► https://stackoverflow.com/questions/1085801/get-selected-value-in-dropdown-list-using-javascript - Get Object by Id from JSON ► https://stackoverflow.com/questions/7364150/find-object-by-id-in-an-array-of-javascript-objects — Nope, Dec 01 '17 at 15:00

score 1 · Answer 1 · answered Dec 01 '17 at 14:35

You can save stringified object itself as the value and show the same on change event

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

Demo

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>

This seems like a very advanced way to do it, I am very new to programming. Are there any easier ways? — Suzdar Ibrahim, Dec 01 '17 at 14:45
@SuzdarIbrahim This shouldn't be too complex, please share your confusion about this code. — gurvinder372, Dec 01 '17 at 14:48
I have never used eventListeners and i dont know what it does — Suzdar Ibrahim, Dec 01 '17 at 14:51
@SuzdarIbrahim In that case, now would be good time to start https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener — gurvinder372, Dec 01 '17 at 14:51
@SuzdarIbrahim I'm surprised during your research into a solution to your issue you did not come across `addEventListener`... — Nope, Dec 01 '17 at 14:55

score 0 · Answer 2 · answered Dec 01 '17 at 14:40

Well you need a for loop that iterate you json and a statement that check if x value is equal to x value push it into the variable declared outside of the for loop.

for example:

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>

score 0 · Answer 3 · answered Dec 01 '17 at 14:48

you can use jquery it is so simple searching in json files like this :

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

and after that you calling your jQuery like this :

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

How do i tell javascript to give me selected info from JSON

3 Answers3