JavaScript的嵌套数组提取

Question

我试图通过JavaScript摆脱嵌套数组数据并显示

我已创建这样

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

数组我有一个名为Electronics, Fasion, Sports三个按钮，当我在电子点击按钮它应该获取并显示电子阵列["Mobile","Tablet","Laptop"]相同的时间和体育

我应该怎么做呢？或者我会错在哪里？

我的HTML和JS的全是这样的

<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> 

Answer 1

您需要使用Bracket Notation通过一个变量来访问属性。

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

而且传递参数的报价将被视为字符串，否则他们将被视为标识符（变量）

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

对进场：

1. 我会建议你使用addEventListener()绑定事件处理程序，而不是使用内联事件处理程序。
2. 您可以使用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>

Answer 2

<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> 

检查https://jsfiddle.net/4o3s2j3L/