2014-06-19 2 views
1

미리 들여 쓰기 JS 함수에서 내 들여 쓰기를 시도하는 중입니다. 단순한 JSON 문자열 화가 필요합니다.JSON pretty print in javascript

이전 JS 서버 환경이 잠겨 있습니다. JSON obj가 없습니다. 나는이 작업은 JSON.stringify 또는 JSON polyfills를 사용할 수 없습니다, 그래서 난 내 자신 FUNC를 작성해야 ..이 나는 등 prettyprint ({ 'A'노력하고있어입니다

function prettyprint(obj, ind){ 
    ind = ind || 0; 
    var indent = spaces(ind), str = ''; 

    if((typeof obj).match(/string|number/) || obj == null){ 
    return indent + obj; 

    } else if(obj.push){ 

    for(var i=0;i<obj.length;i++){ 
     str = str + prettyprint(obj[i], ind+2 || 2); 
    } 
    return indent + '[' + str + ']\n'; 

    } else { 

    str = indent + ' {'; 
    for(var i in obj){ 
     str = str + '\n' + indent+' '+ i + ': ' + prettyprint(obj[i], ind+2); 
    } 
    return str +'\n'; 

    } 

    return str; 


    function spaces(n){ 
    return Array(n).join(' '); 
    } 
} 

: 'B'를 , 'b': { 'c': 'd'}})

+4

이 왜 polyfills을 사용할 수 없습니다? – Bart

+0

XMLHttpRequest 또는 ActiveXObject를 사용하고 API를 통해 예쁘게 인쇄하는 방법은 무엇입니까? – shiva

답변

0

나는 이것이 흥미로울 것이라고 생각했다; 시작점으로 코드를 수정하려고 시도했지만 정확한 장소에서 쉼표를 관리하고 캐리지 리턴이 매우 복잡해지고 있음을 빠르게 알았습니다.

그래서 전달 된 개체를 통해 실행되는 코드로 변환하고 출력 문자열의 서식을 지정하면서 토큰을 방출합니다. 아래 코드를 붙여 넣었습니다.

prettyPrint.js :

prettyPrint = function (data) { 
    return new prettyPrint.processor(data).output; 
} 

prettyPrint.indentString = ' '; 

prettyPrint.processor = function (data) { 
    var indent = 0, 
     output = '', 
     tokens = { 
      value: 1, 
      openArray: 2, 
      arrayValueSeparator: 3, 
      closeArray: 4, 
      openObject: 5, 
      objectValueName: 6, 
      objectValueSeparator: 7, 
      closeObject: 8 
     }; 

    function isArray(unknown) { 
     return Object.prototype.toString.call(unknown) === '[object Array]'; 
    } 

    function isObject(unknown) { 
     return Object.prototype.toString.call(unknown) === '[object Object]'; 
    } 

    function space() { 
     var count = indent; 
     var result = ''; 
     while (count--) result += prettyPrint.indentString; 
     return result; 
    } 

    function emit(tokenType, value) { 
     switch (tokenType) { 
      case tokens.value: 
       output += value; 
       break; 

      case tokens.openArray: 
       output += '['; 
       break; 

      case tokens.arrayValueSeparator: 
       output += ', '; 
       break; 

      case tokens.closeArray: 
       output += ']'; 
       break; 

      case tokens.openObject: 
       output += '{'; 
       indent += 1; 
       break; 

      case tokens.objectValueName: 
       output += '\n' + space() + (/^[a-z][a-z0-9_]*$/i.test(value) ? value : "'" + value + "'") + ': '; 
       break; 

      case tokens.objectValueSeparator: 
       output += ','; 
       break; 

      case tokens.closeObject: 
       indent -= 1; 
       output += '\n' + space() + '}'; 
       break; 
     } 
    } 

    function process(data) { 
     var p, first; 

     if (data === undefined) { 
      return; 
     } 

     // Don't surround null with quotes. 
     if (data === null) { 
      emit(prettyPrint.tokens.value, 'null'); 
     } 

     else if (isArray(data)) { 
      emit(tokens.openArray); 
      first = true; 
      for (p in data) { 
       if (!first) { 
        emit(tokens.arrayValueSeparator); 
       } 
       process(data[p]); 
       first = false; 
      } 
      emit(tokens.closeArray); 
     } 

     else if (isObject(data)) { 
      emit(tokens.openObject); 
      first = true; 
      for (p in data) { 
       if (data.hasOwnProperty(p) && data[p] !== undefined) { 
        if (!first) { 
         emit(tokens.objectValueSeparator); 
        } 
        emit(tokens.objectValueName, p); 
        process(data[p]); 
        first = false; 
       } 
      } 

      emit(tokens.closeObject); 
     } 

     else if (data instanceof Date) { 
      emit(tokens.value, "'" + data.toISOString() + "'"); 
     } 

     else if (typeof data === 'number') { 
      emit(tokens.value, isNaN(data) ? 'null' : data.toString()); 
     } 

     else { 
      emit(tokens.value, "'" + data.toString() + "'"); 
     } 
    } 

    // Start processing the data. 
    process(data); 

    // Export the data. 
    this.output = output; 
} 

prettyPrint.html :

<!DOCTYPE html> 
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta charset="utf-8" /> 
    <title>Pretty Print Testing</title> 
    <script type="text/javascript" src="prettyPrint.js"></script> 
</head> 
<body> 

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

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

<script type="text/javascript"> 
    document.getElementById('pretty1').innerHTML = prettyPrint({ 'a': 'b', 'b': { 'c': 'd' } }); 

    document.getElementById('pretty2').innerHTML = prettyPrint([1, 2, "three", { 'complex-name': [1] }, { simpleName: { subArray: [1, 2, 3], subString: "Hello" } }]); 
</script> 

</body> 
</html> 

출력 :

{ 
    a: 'b', 
    b: { 
     c: 'd' 
    } 
} 

[1, 2, 'three', { 
    'complex-name': [1] 
}, { 
    simpleName: { 
     subArray: [1, 2, 3], 
     subString: 'Hello' 
    } 
}] 

나는이가 도움이 되었기를 바랍니다.

-1

내가 함께 결국 어떤이 :

function pp(obj, ind){ 
    ind = ind || 0; 
    if(typeof obj === 'object' && obj !== null){ 
    var s = sp(ind) + (obj.push ? '[':'{') + '\n'; 
    for(i in obj) 
     s += sp(ind+2) + i + ': ' + pp(obj[i], ind+2); 
    obj = s + sp(ind) + (obj.push ? ']':'}'); 
    } 
    return obj + '\n'; 

    function sp(n){ 
    return Array(n).join(' '); 
    } 
} 
+0

방금 ​​테스트에서 이것을 시도했습니다. 하지만 출력이 옳지 않다고 생각합니다. 배열은 마치 사전처럼 인쇄됩니다. 하위 객체를 참조하는 경우 객체에 이름 입력 후 홀수 공간이 있습니다. 코드 몇 줄에 대한 흥미로운 솔루션. – Paul