如何使用JSON數據設置Div內容

Question

我有一個數組的JSON對象，我要做的是動態填充div

• 我有一個select option我用我的JSON數據的所有鍵填充
• 在我的JSON中，每個鍵都有一個數據數組作為其值，我正在嘗試將這些值添加到其他div ，但這不起作用

碼

 $(document).ready(function() { var ImageData = { "Employ A": [ "EmployA1.jpg", "EmployA2.jpg" ], "Employ B": [ "EmployeB1.jpg" ], "Employ C": [ "EmployeC1.jpg" ] } var CountersName = Object.keys(ImageData) let dropdown = $("#counterNames") dropdown.append('<option selected="true" disabled>Select Counter</option>'); for (var i = 0; i < CountersName.length; i++) { $('<option/>').val(CountersName[i]).html(CountersName[i]).appendTo('#counterNames'); } $("#counterNames").on('change', function() { var value = $(this).val(); $(".card-header").text(value) //setting card header console.log(ImageData.value) // this shows undefinded on console $(".list-group-item").text(ImageData.value) }) }); 

 .switch { position: relative; display: inline-block; width: 60px; height: 34px; float: right; } /* Hide default HTML checkbox */ .switch input { display: none; } /* The slider */ .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; } .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; } input.success:checked+.slider { background-color: #8bc34a; } input:checked+.slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); } /* Rounded sliders */ .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <div class="container"> <div class="col-xs-12 col-sm-12 col-md-6 col-lg-4"> <label for="counterNames">Select Counter:</label> <select class="form-control" id="counterNames"> </select> <div class="card" style="margin: 50px 0"> <div class="card-header"></div> <ul class="list-group list-group-flush"> <li class="list-group-item"><label class="switch "> <input type="checkbox" class="success"> <span class="slider round"></span> </label> </li> </ul> </div> </div> </div> 

在更改“就業select field我正在嘗試實現以下目標

 .switch { position: relative; display: inline-block; width: 60px; height: 34px; float: right; } /* Hide default HTML checkbox */ .switch input { display: none; } /* The slider */ .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; } .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; } input.success:checked+.slider { background-color: #8bc34a; } input:checked+.slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); } /* Rounded sliders */ .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <div class="container"> <div class="col-md-6"> <div class="card" style="margin: 50px 0"> <div class="card-header">Employ A</div> <ul class="list-group list-group-flush"> <li class="list-group-item ">EmployA1.jpg <label class="switch "> <input type="checkbox" class="success"> <span class="slider round"></span> </label> </li> <li class="list-group-item ">EmployA2.jpg <label class="switch "> <input type="checkbox" class="success"> <span class="slider round"></span> </label> </li> </ul> </div> </div> </div> 

我試過下面的代碼

Object.keys(ImageData).forEach(function (k) {
                ImageData[k].forEach(function (d) {
                    console.log(d) 
                 });

            });

但是當我從選擇字段中選擇任何下拉EmployA1.jpg,EmployA2.jpg,EmployB1.jpg,Employc1.jpg時EmployA1.jpg,EmployA2.jpg,EmployB1.jpg,Employc1.jpg它會打印所有值，例如EmployA1.jpg,EmployA2.jpg,EmployB1.jpg,Employc1.jpg 。我要嘗試做的是當我選擇EmployA然后EmployA1.jpg and EmployA2.jpg應該來

Answer 1

您錯誤地使用了數組“ ImageData”的索引。 寫ImageData ['value']而不是ImageData.value。

另外，在您輸入錯誤的代碼之后，我的意思是：

  $(".list-group-item").text(ImageData.value)

如果要顯示圖像名稱列表，請使用以下代碼：

 $(document).ready(function() { var ImageData = { "Employ A": [ "EmployA1.jpg", "EmployA2.jpg" ], "Employ B": [ "EmployeB1.jpg" ], "Employ C": [ "EmployeC1.jpg" ] } var CountersName = Object.keys(ImageData) let dropdown = $("#counterNames") dropdown.append('<option selected="true" disabled>Select Counter</option>'); for (var i = 0; i < CountersName.length; i++) { $('<option/>').val(CountersName[i]).html(CountersName[i]).appendTo('#counterNames'); } $("#counterNames").on('change', function() { var value = $(this).val(); $(".card-header").text(value); //setting card header console.log(ImageData[value]) ;// this shows undefinded on console // $(".list-group-item").text(ImageData[value]) var ul = document.getElementById(".list-group"); ul_innerhtml = ""; for (i=0; i < ImageData[value].length; i++) { title = ImageData[value][i]; var ul_innerhtml = ul_innerhtml+'<li class="list-group-item">'+title+'<label class="switch "><input type="checkbox" class="success"><span class="slider round"> </span></label></li>'; } $(".list-group").html(ul_innerhtml); }) }); 

 .switch { position: relative; display: inline-block; width: 60px; height: 34px; float: right; } /* Hide default HTML checkbox */ .switch input { display: none; } /* The slider */ .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; } .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; } input.success:checked+.slider { background-color: #8bc34a; } input:checked+.slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); } /* Rounded sliders */ .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; } 

 <!DOCTYPE html> <html> <head> <title></title> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> </head> <body> <div class="container"> <div class="col-xs-12 col-sm-12 col-md-6 col-lg-4"> <label for="counterNames">Select Counter:</label> <select class="form-control" id="counterNames"> </select> <div class="card" style="margin: 50px 0"> <div class="card-header"></div> <ul class="list-group list-group-flush"> <li class="list-group-item"> <label class="switch "> <input type="checkbox" class="success"> <span class="slider round"> </span> </label> </li> </ul> </div> </div> </div> </body> </html>