Question

我正在尝试通过javascript

从嵌套数组中获取数据和显示

我创建了一个像这样的数组

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

我有三个名为Electronics, Fasion, Sports的按钮，当我点击电子按钮时，它应该获取并显示与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>

方法：

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

JavaScript嵌套数组提取

2 个答案: