複数レベルのJSONを再帰でソートして解析する

Question

JavaScriptは再帰を使用しようとしていますが、理解するためには援助が必要です。

私は "のサブカテゴリ"

var STORE_CATEGORIES = [{ 
     "Id":"1", 
     "Name":"One Parent", 
     "Sort":"0", 
     "Subcategories":[ 
      "Id":"1", 
      "Name":"One Subcategory", 
      "Sort":"0", 
      "Subcategories":[{ 
       "Id":"1", 
       "Name":"One SubSubcategory", 
       "Sort":"0", 
       "Subcategories":[{ 
        ..... 
       }] 
      }] 
     ]}, 
     "Id":"2", 
     "Name":"Two Parent", 
     "Sort":"1", 
     .... 
    ]} 

と、これは私のスクリプトで、今までのマルチレベルでこのJSONを持っている：私は今

sortJSON(STORE_CATEGORIES, $('.categories div'), 'Sort', true); 

：コールする

function sortJSON(json, output, prop, asc){ 
    json = json.sort(function(a, b){ 
     if(asc){ 
      return (a[prop] > b[prop]) ? 1 : ((a[prop] < b[prop]) ? -1 : 0); 
     } else { 
      return (b[prop] > a[prop]) ? 1 : ((b[prop] < a[prop]) ? -1 : 0); 
     } 
    }); 
    showJsonResults(json, output); 
} 
function showJsonResults(json, output){ 
    var parent = output; 
    var list = $('<ul />').appendTo(parent); 
    var html = ''; 
    for (var i = 0; i < json.length; i++) { 
     var result = json[i]; 
     html += '<li data-sort="'+result.Sort+'" data-id="'+result.Id+'"'; 
     if(result.Visible == false){ 
      html += ' class="hide"'; 
     } 
     html += '><a href="'+result.URL+'">'+result.Name+'</a>'; 
     if(result.Subcategories){ 
      html += '<ul>'; 
      for (key in result.Subcategories) { 
       var sub = result.Subcategories[key]; 
       html += '<li data-sort="'+sub.Sort+'" data-id="'+sub.Id+'"'; 
       if(sub.Visible == false){ 
        html += ' class="hide"'; 
       } 
       html += '><a href="'+sub.URL+'">'+sub.Name+'</a>'; 
       html += '</li>'; 
      } 
      html += '</ul>'; 
     } 
     html += '</li>'; 
    } 
    list.append(html); 
} 

機能カテゴリ+サブカテゴリのみを取得していますが、サブカテゴリのサブカテゴリはさらにあります。

ここで再帰を使用するにはどうすればよいですか？おかげさまで

Answer 1

あなたは少しあなたの機能を変更する必要があります。

function sortJSON(json, output, prop, asc){ 
     json = json.sort(function(a, b){ 
      if(asc){ 
       return (a[prop] > b[prop]) ? 1 : ((a[prop] < b[prop]) ? -1 : 0); 
      } else { 
       return (b[prop] > a[prop]) ? 1 : ((b[prop] < a[prop]) ? -1 : 0); 
      } 
     }); 
     var parent = output; 
     var list = $('<ul />').appendTo(parent); 
     var html = showJsonResults(json); 
     list.append(html); 
    } 
function showJsonResults(json) { 
    var html = ''; 
    $.each(json, function(i, result) { 
    html += '<li data-sort="' + result.Sort + '" data-id="' + result.Id + '"'; 
    if (result.Visible == false) { 
     html += ' class="hide"'; 
    } 
    html += '><a href="' + result.URL + '">' + result.Name + '</a>'; 
    if (result.Subcategories.length) { //if you have subcategories call the function again 
     console.log(result.Subcategories[0].Name); 
     html += '<ul>' + showJsonResults(result.Subcategories) + '</ul>'; 
    } 

    html += '</li>'; 
    }); 
    return html 
} 
} 

デモ：https://jsfiddle.net/neLbgp4r/1/