json을 들여 쓰기 된 텍스트 트리로 효율적으로 변환하려면 어떻게해야합니까?

Question

이 같은 JSON을 감안할 때 :

{ 
    Normalize: {}, 
    Typography: {}, 
    'Flex-grid': {}, 
    Elements: {}, 
    Forms: {}, 
    Navigation: { 
     Links: {}, 
     Menus: {} 
    }, 
    Accessibility: {}, 
    Alignments: {}, 
    Clearings: {}, 
    Widgets: {}, 
    Content: { 
     'Posts-and-pages': {}, 
     Comments: {} 
    }, 
    'Infinite-scroll': {}, 
    Media: { 
     Captions: {}, 
     Galleries: {} 
    } 
} 

나는이 같은 들여 쓰기 일반 텍스트 생성하려면 : 나는 몇 가지 빠른 더러운 코드로 올라와있다

# Normalize 
# Typography 
# Flex grid 
# Elements 
# Forms 
# Navigation 
    ## Links 
    ## Menus 
# Accessibility 
# Alignments 
# Clearings 
# Widgets 
# Content 
    ## Posts and pages 
    ## Comments 
# Infinite scroll 
# Media 
    ## Captions 
    ## Galleries 

를 (I는 자바 스크립트 초보자 해요) 이것을 달성하기 위해. 코드를 실행하면 속도가 매우 느려집니다. 이 작업을보다 빠르고 효율적으로 수행하려면 어떻게해야합니까? 여기

function jsonToIndentedText(json) { 
    var text = JSON.stringify(json, null, '\t'); 

    var indentedText = []; 

    var lines = text.split('\n'); 

    lines.forEach(function(line) { 
     if ('{' == line || '{' == line || '' == line) { 
      return; 
     } 

     var textNow = line.replace(/"/gi, '').replace(/:[\s | \S]*$/i, ''); 

     if (textNow.search("}") < 0) { 
      textNowArr = textNow.split(/\t/gi); 
      level = textNowArr.length - 1; 
      var indents = ''; 
      var hashes = '#'; 
      for (var i = 1; i < level; i++) { 
       indents += '\t'; 
       hashes += '#'; 
      } 
      indentedText.push(indents + hashes + ' ' + textNow.replace(/\t/gi, '').replace(/-/gi,' ')); 
     } 

    }); 
    return indentedText.join('\n'); 
} 

내 jsfiddle입니다 : https://jsfiddle.net/94t4dyag/1/

Answer 1

난 당신이 자바 스크립트를 사용하여 문자열을 구문 분석 수동으로 다음 JSON의 객체를 문자열로 변환한다고 생각하지 않습니다

- 객체 자체가 이미 JSON 문자열을 나타냅니다 특히 . 이 같은

시도 뭔가 : 당신이 그것을 위해 문자열 연산을 필요로하지 않기 때문에

function prettify(obj){ 

    return recurse(0, obj);   

    function recurse(level, obj){ 
     var result = ""; 
     foreach(var prop in obj) 
     if(obj.hasOwnProperty(prop)) 
     { 
      result += printIndents(level);//TODO write this 
      result += prop + "\n"; 
      result += recurse(level + 1, obj[prop]); 
     } 

     return result; 
    } 
} 

Answer 2

나는, 개체 자체를 사용하는 것이 좋습니다.

이 제안에서는 객체를 매개 변수로 사용하고 실제 깊이 수준의 재귀 호출에 함수를 사용합니다.

내부에서 함수의 모든 키를 가져 와서 반복합니다. 그런 다음 값이 객체인지 아닌지 확인합니다. 객체를 사용하면 실제 객체와 수준이 증가 된 함수가 다시 호출됩니다.

값이 발견되면 값이 결과 문자열에 추가됩니다.

function print(object, level) { 
 
    var SPACER = ' ', 
 
     NEWLINE = '\n' 
 
     result = ''; 
 

 
    level = level || 0; 
 
    Object.keys(object).forEach(function (key) { 
 
     var i = level; 
 
     while (i--) { 
 
      result += SPACER; 
 
     } 
 
     if (typeof object[key] === 'object' && object[key] !== null) { 
 
      result += key + NEWLINE; 
 
      result += print(object[key], level + 1); 
 
      return; 
 
     } 
 
     result += key + ': ' + object[key] + NEWLINE; 
 

 
    }); 
 
    return result; 
 
} 
 

 
var data = { Normalize: { somekey: 1 }, Typography: { anotherkey: 2 }, 'Flex-grid': {}, Elements: {}, Forms: {}, Navigation: { Links: {}, Menus: {} }, Accessibility: {}, Alignments: {}, Clearings: {}, Widgets: {}, Content: { 'Posts-and-pages': {}, Comments: {} }, 'Infinite-scroll': {}, Media: { Captions: {}, Galleries: {} } }; 
 
document.getElementById('pre').innerHTML = print(data);

<pre id="pre"></pre>