JavaScript nested array fetch

Question

I am trying to get the data and display from nested array through javascript

i have created an array like this

 var products = {Elecrtonics:["Mobile","Tablet","Laptop"],
    fasion:["celio","UCB","PE"],sports:["Puma","Rebock","Nike"]
};

i have three buttons named Electronics, Fasion, Sports when i click on Electronics button it should fetch and display electronics array ["Mobile","Tablet","Laptop"] same for Fasion and Sports

What should my approach for this? Or am i going wrong some where?

My Entire of HTML and JS looks like this

<div class = "container" id="formcontainer">
            <form>
                <div class="form-group col-lg-4 col-md-offset-3">
                    <h1>Welcome</h1>
                    <input type="text" class="form-control search" id="search" placeholder="What is in your mind?">

                </div>
                <div class="form-group col-lg-4 col-md-offset-3">
                    <button class="btn btn-primary" onClick="getData(Electronics)">Elecrtonics</button>
                    <button class="btn btn-primary" onClick="getData(Fasion)">Fasion</button>
                    <button class="btn btn-primary" onClick="getData(Sports)">Sports</button>
                </div>
                <p id = "myProducts"></p>
            </form>
        </div>
        <script>
        var products = {Elecrtonics:["Mobile","Tablet","Laptop"],fasion:["celio","UCB","PE"],sports:["Puma","Rebock","Nike"]};
            function getData (el){          
                document.getElementById("myProducts").innerHTML = products.el;
                    event.preventDefault()  
            }
</script>

`products[el];` and you need to pass arguments in quotes i.e. `getSports('Sports')` — Satpal, Dec 27 '16 at 06:44
i would like to know whether my approach is correct or not because i am not able to get desired output. i need some suggestions — Hemanth Paluri, Dec 27 '16 at 06:52
your approach is correct, but need some changes which are describe in above link — CommonPlane, Dec 27 '16 at 06:54
@savaliya Rahul there is nothing in the above link please provide the correct link. — Hemanth Paluri, Dec 27 '16 at 06:57
@savaliya Rahul i have tried but it is throwing is undefined please check the code hear https://jsfiddle.net/jd619agf/ — Hemanth Paluri, Dec 27 '16 at 07:06

Satpal · Accepted Answer · 2016-12-27T07:29:28.820

You need to use Bracket Notation to access properties via a variable.

 document.getElementById("myProducts").innerHTML = products[el];

Also pass arguments in quotes to be treated as string else they will be treated as identifiers(variables)

<button class="btn btn-primary" onClick="getData('Electronics')">Electronics</button>

For approach:

I would recommend you to use addEventListener() to bind event handler instead of using inline event handlers.
You can use data-*prefixed attributes to store arbitrary data

 var products = {
   Elecrtonics: ["Mobile", "Tablet", "Laptop"],
   Fasion: ["celio", "UCB", "PE"],
   Sports: ["Puma", "Rebock", "Nike"]
 };

 var elements = document.querySelectorAll('.btn-primary');
 for (var i = 0; i < elements.length; i++) {
   elements[i].addEventListener('click', function(event) {
     document.getElementById("myProducts").innerHTML = products[this.dataset.type];
     event.preventDefault()
   });
 }

<div class="container" id="formcontainer">
  <form>
    <div class="form-group col-lg-4 col-md-offset-3">
      <h1>Welcome</h1>
      <input type="text" class="form-control search" id="search" placeholder="What is in your mind?">

    </div>
    <div class="form-group col-lg-4 col-md-offset-3">
      <button class="btn btn-primary" data-type="Elecrtonics">Elecrtonics</button>
      <button class="btn btn-primary" data-type="Fasion">Fasion</button>
      <button class="btn btn-primary" data-type="Sports">Sports</button>
    </div>
    <p id="myProducts"></p>
  </form>
</div>

why first you marked question as duplicate and after that removed from duplicate? — CommonPlane, Dec 27 '16 at 07:19
@SavaliyaRahul, Due OP comment _i would like to know whether my approach is correct or not because i am not able to get desired output. i need some suggestions_ had to reopen it so that other can provide answer on __approach__ which was not covered by that question. Hope my point is clear — Satpal, Dec 27 '16 at 07:20

score 1 · Answer 2 · answered Dec 27 '16 at 07:16

<div class = "container" id="formcontainer">
            <form>
                <div class="form-group col-lg-4 col-md-offset-3">
                    <h1>Welcome</h1>
                    <input type="text" class="form-control search" id="search" placeholder="What is in your mind?">

                </div>
                <div class="form-group col-lg-4 col-md-offset-3">
                    <button class="btn btn-primary" onClick="getProducts('Elecrtonics')">Elecrtonics</button>
                    <button class="btn btn-primary" onClick="getProducts('fasion')">Fasion</button>
                    <button class="btn btn-primary" onClick="getProducts('sports')">Sports</button>
                </div>
                <p id = "myProducts"></p>
            </form>
        </div>


    <script>
           var products = {Elecrtonics:["Mobile","Tablet","Laptop"],fasion:["celio","UCB","PE"],sports:["Puma","Rebock","Nike"]};
                function getProducts (el){  

                    document.getElementById("myProducts").innerHTML = products[el];
                        event.preventDefault()  
                }
    </script>

Check https://jsfiddle.net/4o3s2j3L/

JavaScript nested array fetch

2 Answers2