How to find the index of an element in a multidimensional array by JavaScript/JQuery

Question

Converting a JSON array from a PHP array by json_encode. I want to find the index of a specific element from that JSON array by JavaScript/JQuery.

First the user will select a option where the values will be the IDs of people.

<select class="form-control" id="pname" name="pname" required>
    <option value="">--Please select--</option>
    <option value="312">John Doe</option>
    <option value="313">Mark Angel</option>
    <option value="314">Chloe Karl</option>
</select>

Then by JavaScript/JQuery I need to get the index of the value of selected option from the JSON array given below.

{
"p_id":{"1":312,"2":313,"3":314},
"p_name":{"1":"John Doe","2":"Mark Angel","3":"Chloe Karl"},
"p_dob":{"1":"1983","2":"1993","3":"1987"},
"p_sex":{"1":"Male","2":"Male","3":"Male"}
}

I don’t see any arrays in your data. Those are all objects. Arrays ar enclosed in [ ] in javascript. — Mark
– Mark, Commented Sep 3, 2018 at 17:24
Thanks, actually I am very new to this Json. When I googled to convert php array to json array, I got the suggestion. May be I made mistake. — Neel Debnath
– Neel Debnath, Commented Sep 3, 2018 at 17:29
What does your PHP array look like and what is the code you're using to convert it? — Dan
– Dan, Commented Sep 3, 2018 at 17:35
Array ( [p_id] => Array ( [1] => 312 [2] => 313 [3] => 314 ) [p_name] => Array ( [1] => Jhon Doe [2] => Mark Angel [3] => Chloe Karl ) [p_dob] => Array ( [1] => 2018 [2] => 1534444200 [3] => 782591400 ) [p_sex] => Array ( [1] => Male [2] => Male [3] => Male ) ) It look something like that.. And I used json_encode to convert it. — Neel Debnath
– Neel Debnath, Commented Sep 3, 2018 at 17:42

A l w a y s S u n n y · Accepted Answer · 2018-09-03 17:54:22Z

1

If I don't misunderstood/misinterpret your question, Then you need this snippet.

Steps to do:

Add a onchange event on your select element first.
Parse the json string using JSON.parse()
Use Array.prototype.filter() to get the key/index of the selected user.

function getSelect() {
  var obj = JSON.parse('{"p_id":{"1":312,"2":313,"3":314},"p_name":{"1":"John Doe","2":"Mark Angel","3":"Chloe Karl"},"p_dob":{"1":"1983","2":"1993","3":"1987"},"p_sex":{"1":"Male","2":"Male","3":"Male"}}');
  var ids = obj.p_id;
  var e = document.getElementById("pname");
  var user = e.options[e.selectedIndex].value;
  //console.log(ids, user, Object.keys(ids))
  if(user && user!=""){
    var k = Object.keys(ids).filter((key) => {
      return ids[key] == user;
    })[0];
     console.log(k)
   }else {
     console.log('Select an option first');
   }
  
}

<select class="form-control" onchange="getSelect()" id="pname" name="pname" required>
  <option value="">--Please select--</option>
  <option value="312">John Doe</option>
  <option value="313">Mark Angel</option>
  <option value="314">Chloe Karl</option>
</select>

edited Sep 3, 2018 at 17:54

answered Sep 3, 2018 at 17:49

A l w a y s S u n n y

38.8k9 gold badges68 silver badges120 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Neel Debnath Over a year ago

It is showing an error Cannot read property 'undefined' of undefined on line var user = e.options[e.selectedIndex].value

A l w a y s S u n n y Over a year ago

@NeelDebnath Did you run may code snippet here on Stackoverflow.com ?

Neel Debnath Over a year ago

The error is showing in my workplace, the code is running well in Stackoverflow snippet

A l w a y s S u n n y Over a year ago

check for the id with name pname

Neel Debnath Over a year ago

It is working now. I just rewrite the <select> html code and repositioned the DOM event from the last to after the classes. Thanks a lot. It is working finally,

|

Emeeus · Accepted Answer · 2018-09-03 17:34:16Z

1

You have a javascript object literal not an array, you could use a for in loop to iterate and find what you are looking for.

var obj = {
  p_id: { "1": 312, "2": 313, "3": 314 },
  p_name: { "1": "John Doe", "2": "Mark Angel", "3": "Chloe Karl" },
  p_dob: { "1": "1983", "2": "1993", "3": "1987" },
  p_sex: { "1": "Male", "2": "Male", "3": "Male" }
};

var selected = 313;

for (p in obj.p_id) {
  if (obj.p_id[p] == selected) {
    console.log(p);
  }
}

If you have the raw response from php, you have then a JSON. You could convert it to object using JSON.parse()

answered Sep 3, 2018 at 17:34

Emeeus

5,2922 gold badges30 silver badges42 bronze badges

1 Comment

Neel Debnath Over a year ago

Thanks mate. really appreciable.

Collectives™ on Stack Overflow

How to find the index of an element in a multidimensional array by JavaScript/JQuery

2 Answers 2

6 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related