javascript - 오기 - 자바스크립트 데이터 저장




textarea 입력에서 json 데이터 미리보기 (2)

구문 분석 단계에서는 텍스트 영역의 내용을 JSON.parse 하여 잘못된 입력으로 인한 오류를 처리하려고합니다.

질문의 서식 부분에 JSON.stringify(blob, undefined, 2) . 또는 여기에 색상이 필요한 경우 REact로 작성된 간단한 JSON 형식 / 색상 구성 요소가 있습니다.

const HighlightedJSON = ({ json }: Object) => {
  const highlightedJSON = jsonObj =>
    Object.keys(jsonObj).map(key => {
      const value = jsonObj[key];
      let valueType = typeof value;
      const isSimpleValue =
        ["string", "number", "boolean"].includes(valueType) || !value;
      if (isSimpleValue && valueType === "object") {
        valueType = "null";
      }
      return (
        <div key={key} className="line">
          <span className="key">{key}:</span>
          {isSimpleValue ? (
            <span className={valueType}>{`${value}`}</span>
          ) : (
            highlightedJSON(value)
          )}
        </div>
      );
    });
  return <div className="json">{highlightedJSON(json)}</div>;
};

이 CodePen에서 작동하는 것을보십시오 : https://codepen.io/benshope/pen/BxVpjo

희망이 도움이됩니다!

이 특정 주제를 검색했지만 비슷한 주제를 찾을 수 없습니다. 이 부분을 닫고 링크를 제공하십시오.

나는 json 데이터 API 시뮬레이터를 만들고있다. 사용자가 json 객체 요청을 복사하여 텍스트 영역에 붙여 넣기를 원할 경우 서버에 보내기 전에 수정할 수도 있습니다.

문제는 json obj 복사 및 patses는 종종 여분의 공백을 초래하며 pre 태그를 사용하여도 제대로 정렬되지 않습니다. 나는 또한 키와 값에 적용된 좋은 색 구성표를 원한다.

플러그인, 다른 질문 및 코드 스 니펫을 보았지만 텍스트를 편집 할 수있는 텍스트 영역에는 적용되지 않습니다. 편집 모드에서 모든 스타일의 HTML 태그를 표시하지 않고 스타일을 유지해야합니까? 나는 자바 스크립트 또는 jquery와 함께 처음부터 그것을 쓸 수 있기를 원한다.


구문 하이라이팅은 어렵지만 텍스트 영역에 입력 된 json 객체를 인쇄 하기 위해이 바이올린을 확인하십시오. 이 기능을 사용하려면 JSON이 유효해야합니다. (dev 콘솔을 사용하여 오류를 잡으십시오.) 올바른 json이 jsLint 를 확인하십시오.

HTML :

<textarea id="myTextArea" cols=50 rows=10></textarea>
<button onclick="prettyPrint()">Pretty Print</button>

js :

function prettyPrint() {
    var ugly = document.getElementById('myTextArea').value;
    var obj = JSON.parse(ugly);
    var pretty = JSON.stringify(obj, undefined, 4);
    document.getElementById('myTextArea').value = pretty;
}

먼저 다음과 같은 간단한 입력을 시도하십시오. { "a": "hello", "b": 123}

JSON의 간단한 인쇄는 다소 쉽게 할 수 있습니다. 이 js 코드를 사용해보십시오 : ( jsFiddle here )

// arbitrary js object:
var myJsObj = {a:'foo', 'b':'bar', c:[false,2,null, 'null']};

// using JSON.stringify pretty print capability:
var str = JSON.stringify(myJsObj, undefined, 4);

// display pretty printed object in text area:
document.getElementById('myTextArea').innerHTML = str;

이 HTML의 경우 :

<textarea id="myTextArea" cols=50 rows=25></textarea>

JSON.stringify 설명서를 확인하십시오.







json