JSON result value as key in JavaScript/jQuery

user_3568205 0
Viewed 118

I have a JSON result where I want to create an accordion menu, I want one value of similar results as title of those similar rows, please check below to see what I did.

Suppose a I have below JSON object

var items = [
    {label: "TY2021H", name: "10-Yr T-Notes", value: "TY2021H"},
    {label: "TY2020Z-TY2021H", name: "10-Yr T-Notes Spread", value: "TY2020Z-TY2021H"},
    {label: "TY2021H-TY2021M", name: "10-Yr T-Notes Spread", value: "TY2021H-TY2021M"},
    {label: "TY2020Z-2*TY2021H+TY2021M", name: "10-Yr T-Notes Butterfly", value: "TY2020Z-2*TY2021H+TY2021M"}]

The related part of my JS code is as follow:

 var myUL = $("#accordion");
 myUL.empty();
 var currentName = "";    
 for (var i = 0; i <= items.length - 1; i++) {
      var label = items[i].label;
      if (items[i].name != currentName) {
            currentName = items[i].name;
                          list +=
                            '<a href="#demo' +
                            i +
                            '" class="list-group-item list-group-item-info" data-toggle="collapse" data-parent="#accordion">' +
                            currentName +
                            ' <span id="opnClsSign" class="glyphicon glyphicon-menu-down"></span></a>';
                          list += '<div class="collapse in" id="demo' + i + '">';
                        }
        
                        list += '<a href="#" class="list-group-item">' + label + "</a>";
                        
                      }
                      list += "</div>";
                      myUL.append(list);

Part of my HTML div

<div class="list-group panel" id="accordion"></div>

Result I get now enter image description here

What I expect enter image description here

bootstrap-accordion arrays jquery json javascript
2 Answers

Code indentation can help in a situation like this. Your last two lines should be inside the loop for the code to make sense. In every iteration, you must close the div and add the code to myUL:

var items = [
    {label: "TY2021H", name: "10-Yr T-Notes", value: "TY2021H"},
    {label: "TY2020Z-TY2021H", name: "10-Yr T-Notes Spread", value: "TY2020Z-TY2021H"},
    {label: "TY2021H-TY2021M", name: "10-Yr T-Notes Spread", value: "TY2021H-TY2021M"},
    {label: "TY2020Z-2*TY2021H+TY2021M", name: "10-Yr T-Notes Butterfly", value: "TY2020Z-2*TY2021H+TY2021M"}]


var myUL = $("#accordion");
myUL.empty();
var currentName = "";    
for (var i = 0; i <= items.length - 1; i++) {
  var label = items[i].label;
  var list = '';
  if (items[i].name != currentName) {
    currentName = items[i].name;
    list +=
        '<a href="#demo' +
        i +
        '" class="list-group-item list-group-item-info" data-toggle="collapse" data-parent="#accordion">' +
        currentName +
        ' <span id="opnClsSign" class="glyphicon glyphicon-menu-down"></span></a>';
    list += '<div class="collapse in" id="demo' + i + '">';
  }

  list += '<a href="#" class="list-group-item">' + label + "</a>";
  list += "</div>";
  myUL.append(list);
}
  
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list-group panel" id="accordion"></div>

Also, you needed to define list.

user_95651390

I resolved the issue my self, and I have added the final source code into this pen:

[https://codepen.io/rafihaidari/pen/ExyBGVK]
user_35682050
Related