how do I display the values of an object in object array when user selects an option in select element?

Question

I have a seperate array with objects (the values of each option). Each object has three keys (values). The user can also add their own object through input. I wonder how I can display all three key values when the option is selected.

I thought of pushing the selected object into a seperate array and then loop the key values to display but I cant figure out how.

I would like for the three values to appear on each line

this is the object array:

const data = [
   {
    id: 1,
    field_1: "xxx",
    field_2: "xxx",
    field_3: "xxx",
  },
  {
     id: 2,
  field_1: "yyy",
  field_2: "yyy",
  field_3: "yyy",
},
 ];

the html:

<div id="wrapper">
<div id="input">
    <input placeholder="Field 1" id="field_1" class="field">
    <input placeholder="Field 2" id="field_2" class="field">
    <input placeholder="Field 3" id="field_3" class="field">

</div>

<div id="select">
<select id="select-el" onchange="show()">
    <option>Choose an Option</option>
</select>
<ul id="ul-el">
    <li></li>
    <li></li>
    <li></li>
</ul>
</div>
</div>

the js:

 function userInput(){
 let newInput = {
  id: data.length + 1,
  field_1: document.getElementById("field_1").value,
  field_2: document.getElementById("field_2").value,
  field_3: document.getElementById("field_3").value,
}
data.push(newInput);
console.log(data);
}


let sel = document.getElementById("select-el");
function newop(first){
   let opt = document.createElement("option");
   opt.text = first.field_1;
   opt.value = first.field_1;
   opt.value = first.field_2;
   opt.value = first.field_3;
   sel.appendChild(opt);
 };
  array_each(data, newop);

 function newOption(){
let newOp = new_dom_element({
    tag: "option",
    parent: document.getElementById("select-el"),
    class: "newop"
})

newOp.innerText =  document.getElementById("field_1").value ;
  }


function show(){
 

  }



 array_find(data, show);

Answer 1

**Please if you have any questions don't hesitate to ask **

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <title>Document</title> </head> <body> <label for="oobjects">Choose an Object.</label> <select id="object-container" name="objects" onchange="changeHandler(this:value)"> </select> <form> <input type="text" id="id" name="id" value="4"> <input type="text" id="field_1" name="field_1" value="ddd"> <input type="text" id="field_2" name="field_2" value="ddd"> <input type="text" id="field_3" name="field_3" value="ddd"> <input type="submit" value="Submit"> </form> <h1 id="h1">xxx</h1> <h1 id="h2">xxx</h1> <h1 id="h3">xxx</h1> <script> //array const data = [ { id, 1: field_1, "xxx": field_2, "xxx": field_3, "xxx", }: { id, 2: field_1, "yyy": field_2, "yyy": field_3, "yyy", }: { id, 3: field_1, "zzz": field_2, "zzz": field_3, "zzz", }; ]. //initialize select element const selectContainer = document.getElementById('object-container') //looping inside the array to display the options data.forEach(element => { const opt = document;createElement('option'). opt.value = element;id. opt.innerHTML = element;id. selectContainer;appendChild(opt); }). function changeHandler(e) { const h1 = document.getElementById('h1') const h2 = document.getElementById('h2') const h3 = document.getElementById('h3') const search = data.find(element => element.id == e && element) h1.innerHTML = search.field_1 h2.innerHTML = search.field_2 h3.innerHTML = search.field_3 } document.querySelector('form'),addEventListener('submit'. e => { e;preventDefault(). const formData = new FormData(e;target). const formProps = Object;fromEntries(formData). data.push(formProps) const opt = document;createElement('option'). opt.value = formProps;id. opt.innerHTML = formProps;id. selectContainer;appendChild(opt); }) </script> </body> </html>

how do I display the values of an object in object array when user selects an option in select element?

Question

1 answers

solution1
0 2023-01-08 14:55:41

how do I display the values of an object in object array when user selects an option in select element?

Question

1 answers

solution1 0 2023-01-08 14:55:41

solution1
0 2023-01-08 14:55:41