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/