json multidimensional array to tree structure in javascript

Question

I have this JSON response:

    [
{storeWebsites=[
    {website_id=1.0, name=Default Store View}, 
    {website_id=0.0, name=Admin}
    ]}, 
{storeGroups=[
   {website_id=0.0, name=Default, id=0.0}, 
    {website_id=1.0, name=Main Website Store, id=1.0}
    ]}, 
{storeViews=[
    {website_id=1.0, name=Default Store View, code=default, id=1.0}, 
    {website_id=0.0, name=Admin, code=admin, id=0.0}
    ]}
]

I would like to group the "website_id" and append the "storeViews.name".

I'm trying to work with the script below but I'm not able to push the values in var group:

     var groups = {};

// .... code to push the values in var groups
 
  $.each(groups, function(key, groups) {
    var $group1 = $("<optgroup>").attr("label", "  " + groups.storeWebsites);
    var $group2 = $("<optgroup>").attr("label", "    " + groups.storeGroups);
  
    groups.storeViews.forEach(function(el) {
      $group2.append(new Option(el.name, el.code));
    });
  
    $('#provider-accounts').append($group1, $group2);
  
  }); 
 
}

So my "id=provider-accounts" should be populated like below:

<optgroup label="Default Store View"></optgroup>
<optgroup label="Main Website Store">
    <option code="default">Default Store View</option>
</optgroup>

    <optgroup label="Admin"></optgroup>
<optgroup label="Default">
    <option code="admin">Admin</option>
</optgroup>

Any help?

That is not proper JSON. – Mr. Polywhirl Mar 24 '21 at 18:39 — Mr. Polywhirl, Mar 24 '21 at 18:39

score 1 · Accepted Answer · answered Mar 24 '21 at 19:02

I think you have the following groups swapped:

<optgroup label="Default">
<optgroup label="Main Website Store">

Anyways, you could destructure your sites, groups, and views and keep track of their indices while looping over one of them.

const main = () => {
  const [ {  storeWebsites }, { storeGroups }, { storeViews }] = json;

  $('#provider-accounts').append(storeWebsites.flatMap((site, index) => {
    const
      group = storeGroups[index],
      view = storeViews[index];
    return [
      $('<optgroup>', { label: site.name }),
      $('<optgroup>', { label: group.name })
        .append($('<option>', { code: view.code, text: view.name }))
    ];
  }));
};

const json = [{
  "storeWebsites": [{
    "website_id": 1.0,
    "name": "Default Store View"
  }, {
    "website_id": 0.0,
    "name": "Admin"
  }]
}, {
  "storeGroups": [{
    "website_id": 0.0,
    "name": "Default",
    "id": 0.0
  }, {
    "website_id": 1.0,
    "name": "Main Website Store",
    "id": 1.0
  }]
}, {
  "storeViews": [{
    "website_id": 1.0,
    "name": "Default Store View",
    "code": "default",
    "id": 1.0
  }, {
    "website_id": 0.0,
    "name": "Admin",
    "code": "admin",
    "id": 0.0
  }]
}];

main();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="provider-accounts">
  <!--
  <optgroup label="Default Store View"></optgroup>
  <optgroup label="Default">
    <option code="default">Default Store View</option>
  </optgroup>
  <optgroup label="Admin"></optgroup>
  <optgroup label="Main Website Store">
    <option code="admin">Admin</option>
  </optgroup>
  -->
</select>

json multidimensional array to tree structure in javascript

1 Answers1