jquery - تبدیل یک آرایه JSON از آرایهها به عناصر <ul> و <li>

من در حال ایجاد یک تصویرسازی سفارشی در مایکروسافت پاور بیآی هستم. رابط برنامهنویسی ایجاد از تایپاسکریپت و کتابخانه d3 استفاده میکند. من همچنین از jquery استفاده میکنم

من در حال تلاش برای ایجاد یک درخت سلسلهمراتبی هستم که نشاندهنده فیلدهایی است که به داخل نمایش کشیده شدهاند. بنابراین عمق درخت در زمان اجرا تعیین میشود، بنابراین نمیداند چند لایه خواهد داشت.

من توانستم دادههای نمونهام را به یک آرایه JSON تو در تو مرتب کنم.

این یک اسکرینشات از کنسول است وقتی که من console.log(finalViewModel) را اجرا میکنم

[{ "text": "France","id": 591, "parent": 0, "identity": {long text},
   "nodes"
        [{"text": "Bread", "id", 478, "parent": 591, "identity: {long text}, 
        "nodes" []}, 
        {"text": "Nocco", "id", 498, "parent": 591, "identity: {long text}, 
        "nodes" []}, 
        {"text": "Red Wine", "id", 718, "parent": 591, "identity: {long 
        text}, 
        "nodes" []}]},
   {"text: "Germany", "id" .....so on and so forth

اینطور دادههای من وقتی در کنسول از JSON.stringify استفاده میکنم به نظر میرسند، همچنین من تنها از ۲ فیلد استفاده کردم تا خیلی شلوغ نشود.

"identity": {متن طولانی}، به این صورت نمایش داده نمیشود. فیلد identity برای مدیر انتخاب Power BI است، بنابراین وقتی چیزی از درخت کلیک شود، در سایر نمودارها بازنمایی میشود. متن طولانی جایگزینی برای یک آرایه بسیار طولانی است که اطلاعات آن هویت آیتم خاص را نگه میدارد.

حالا به مشکل میرسیم، من میخواهم دادههای JSON خود را به عناصر ul و li تبدیل کنم. مثل این:

 <ul>
    <li>France</li>
    <ul>
        <li>Baguette</li>
        <li>Nocco</li>
        <li>Red Wine</li>
    </ul>
    <li>Germany</li>
</ul>

من راهحلهای زیادی برای این نوع مشکل در وب پیدا کردهام اما هیچچیزی به نظر نمیرسد که نیازهای من را برآورده کند.

آیا کسی میتواند به من با یک قطعه کد کاری کمک کند؟

قبلاً از شما سپاسگزارم

پاسخ شماره ۱

در اینجا یک دموی نحوه دستیابی به آن با جاوااسکریپت خالص آمده است.

var createSublist = function(container, args) {
  var ul = document.createElement('ul');
  
  for(var j = 0; j < args.length; j++) {
    var row = args[j];
    
    var li = document.createElement('li');
    li.innerText = row.text;
    
    var nodes = row.nodes;
    if(nodes && nodes.length) {
      createSublist(li, nodes);
    }
    
    ul.appendChild(li);
  }
  
  container.appendChild(ul);
};

var data =[  
   {  
      "text":"France",
      "nodes":[  
         {  
            "text":"Bread"
         },
         {  
            "text":"Nocco"     
         }
      ],

   },
   {  
      "text":"Italy",
      "nodes":[  
         {  
            "text":"Pizza"
         },
         {  
            "text":"Wine",
            "nodes": [
              { 
              	"text": "Red"
              },
              { 
              	"text":"White"
              }
            ]
         }
      ]
   }
];

var container = document.getElementsByClassName('container')[0];  
if(container) 
{ 
  createSublist(container, data);
} 
else 
{
  console.log('Container has not been found'); 
}
  

<div class="container">
</div>

پاسخ شماره ۲

جاوااسکریپت ES6 و یک تابع بازگشتی کوچک

/**
 * Convert Tree structure to UL>LI and append to Element
 * @syntax getTree(treeArray [, TargetElement [, onLICreatedCallback ]])
 *
 * @param {Array} tree Tree array of nodes
 * @param {Element} el HTMLElement to insert into
 * @param {function} cb Callback function called on every LI creation
 */

const treeToHTML = (tree, el, cb) => el.append(
  tree.reduce((ul, n) => {
    const li = document.createElement("li");

    if (cb) cb.call(li, n);
    if (n.nodes?.length) treeToHTML(n.nodes, li, cb);

    ul.append(li);
    return ul;
  }, document.createElement("ul"))
);





// DEMO TIME:

const myTree = [{
  "id": 1,
  "parent_id": 0,
  "name": "Item1",
  "nodes": [{
    "id": 2,
    "parent_id": 1,
    "name": "Item2"
  }]
}, {
  "id": 4,
  "parent_id": 0,
  "name": "Item4",
  "nodes": [{
      "id": 9,
      "parent_id": 4,
      "name": "Item9"
    }, {
      "id": 5,
      "parent_id": 4,
      "name": "Item5",
      "nodes": [{
        "id": 3,
        "parent_id": 5,
        "name": "Item3"
      }]
    }
  ]
}];

treeToHTML(myTree, document.querySelector("#demo"), function(node) {
  this.textContent = `${node.parent_id} ${node.id} ${node.name}`
});

<div id="demo"></div>