Jquery Building Link из Json данных

Question

Честно говоря, это мое последнее средство задавать вопросы. Я потратил много часов на это, и я чувствую, что я почти там, но, может быть, сейчас.

Любая помощь очень ценит это.

У меня есть эти данные в формате Json, и я хотел бы создать опцию, подобную этой.

Ожидается HTML

<select>
<option value="/">Home</option>
<option value="/about">About></option>
<option value="/about/contact">About/Contact</option>
<option value="/about/contact/contact2">About/Contact/Contact2</option>
<option value="/fr/sur">fr/Sur</option>
.......
</select>

Пока мой код может сделать только два уровня вниз. Однако это не go до третьего уровня. / fr / sur / contact /

Другие проблемы заключаются в том, что если ссылка многоязычная, мне нужно добавить дополнительный / fr / впереди.

Вот мои данные:

var links = [
   {
      "id":1,
      "name":"index",
      "slug":"index",
      "parent_id":"0",
      "status":1,
      "multilangual":"en",
      "children":[

      ]
   },
   {
      "id":18,
      "name":"About",
      "slug":"about",
      "parent_id":"1",
      "multilangual":"en",
      "children":[
         {
            "id":1,
            "name":"index",
            "slug":"index",
            "parent_id":"0",
            "multilangual":"en",
            "children":[

            ]
         }
      ]
   },
   {
      "id":19,
      "name":"Sur",
      "slug":"sur",
      "parent_id":"1",
      "multilangual":"fr",
      "children":[
         {
            "id":1,
            "name":"index",
            "slug":"index",
            "parent_id":"0",
            "multilangual":"en",
            "children":[

            ]
         }
      ]
   },
   {
"id": 21,
"name": "contact2",
"slug": "contact2",
"parent_id": "20",
"status": 1,
"multilangual": "fr",
"children": [
  {
    "id": 20,
    "name": "Contact",
    "slug": "contact",
    "parent_id": "1",
    "status": 1,
    "multilangual": "fr",
    "children": [
      {
        "id": 1,
        "name": "index",
        "slug": "index",
        "parent_id": "0",
        "status": 1,
        "multilangual": "en",
        "children": []
      }
    ]
  }
]

}];

<div class="test"></div>

<script>

 var links = {!! str_replace("'", "\'", json_encode($pages)) !!};


 function buildMenu(data){

  var menu = document.createElement('option'); // createing <ul> element

  for(var i=0; i<data.length; i++){ // processing array
    var link = data[i];

     var a  = document.createElement('a');  // creating <a> element
    a.className += link.icon; // adding multiple classes to <a> element
    a.setAttribute('href', link.slug); // setting [href] attribute
    a.innerText = link.name; // setting text

        menu.appendChild(a);

        if(link.children){ // checking childrens (you dont need to creating Count function, all JS arrays has property length (example: links.length))
              var subMenu = getChildren(link.children); // creating submenu
              var _href = a.getAttribute("href"); 
               a.setAttribute("href", subMenu + '/' + _href);
        }
  }
  function getChildren(data){
            for(var i=0; i<data.length; i++){ // processing array
            var link = data[i];
            var href =  link.slug; 
    }
    return href;
}
  return menu;
}

var div  = document.querySelector('div.test') // getting your div
var menu = buildMenu(links); // build menu
div.appendChild(menu) // append menu to your div

</script>

Answer 1

с помощью рекурсии вы можете решить эту проблему

<select class="test"></select>


<script>

var links = [
   {
      "id":1,
      "name":"index",
      "slug":"index",
      "parent_id":"0",
      "status":1,
      "multilangual":"en",
      "children":[

      ]
   },
   {
      "id":18,
      "name":"About",
      "slug":"about",
      "parent_id":"1",
      "multilangual":"en",
      "children":[
         {
            "id":1,
            "name":"index",
            "slug":"index",
            "parent_id":"0",
            "multilangual":"en",
            "children":[

            ]
         }
      ]
   },
   {
      "id":19,
      "name":"Sur",
      "slug":"sur",
      "parent_id":"1",
      "multilangual":"fr",
      "children":[
         {
            "id":1,
            "name":"index",
            "slug":"index",
            "parent_id":"0",
            "multilangual":"en",
            "children":[

            ]
         }
      ]
   },
   {
      "id":20,
      "name":"Contact",
      "slug":"contact",
      "parent_id":"1",
      "multilangual":"en",
      "children":[
         {
            "id":1,
            "name":"index",
            "slug":"index",
            "parent_id":"0",
            "multilangual":"en",
            "children":[

            ]
         }
      ]
   }
];

var control =$(".test");

function createLinks(options,prefix,isChildren){
    $.each(options, function (index, item) {
  var value="";
  var text="";
            if(item.multilangual =="fr" && !isChildren){
                value="/fr"+ prefix+"/"+item.slug;
                text="fr"+ prefix+"/"+item.name;
            }else{
                value=prefix+"/"+item.slug;
                text=prefix+"/"+item.name;
                text=text.substr(1);
            }

            control.append(
                $('<option>', {
                    value: value,
                    text: text
                }, '</option>'));

            if(item.children.length>0){
                createLinks(item.children,value,true);
            }
        });

};
createLinks(links,"",false);

</script>