안전하게 JSON 문자열을 객체로 바꾸기

JSON 데이터 문자열이 주어지면 어떻게 해당 문자열을 JavaScript 객체로 안전하게 바꿀 수 있습니까?

분명히 나는 ​​다음과 같이 안전하지 않게 이것을 할 수 있습니다 :

var obj = eval("(" + json + ')');

그러나 그것은 다른 코드를 포함하는 JSON 문자열에 취약하게 만듭니다. 단순히 평가하는 것은 매우 위험합니다.

JSON.parse(jsonString) 최신 브라우저를 보장 할 수있는 한 순수한 JavaScript 방식입니다.

jQuery 메소드는 더 이상 사용되지 않습니다. 대신이 방법을 사용하십시오.

let jsonObject = JSON.parse(jsonString);

더 이상 사용되지 않는 jQuery 기능을 사용한 원래 답변 :

jQuery를 사용하는 경우 다음을 사용하십시오.

jQuery.parseJSON( jsonString );

정확히 당신이 찾고있는 것입니다 (jQuery documentation 참조 ).

이 답변은 IE <7에 대한 것이며 최신 브라우저의 경우 위의 Jonathan의 답변을 확인하십시오.

이 답변은 구식이며 위의 Jonathan의 답변 ( JSON.parse(jsonString))이 이제 가장 좋습니다 .

JSON.org 에는 JavaScript에 대한 네 가지 언어를 포함하여 여러 언어에 대한 JSON 파서가 있습니다. 나는 대부분의 사람들이 json2.js를 그들의 goto 구현으로 간주한다고 생각 합니다.

" JSON.parse () " 의 간단한 코드 예제를 사용하십시오 .

var jsontext = '{"firstname":"Jesper","surname":"Aaberg","phone":["555-0100","555-0120"]}';
var contact = JSON.parse(jsontext);

그리고 반전 :

var str = JSON.stringify(arr);

다른 방법에 대해서는 잘 모르겠지만 프로토 타입 (JSON 튜토리얼) 에서 수행하는 방법은 다음과 같습니다 .

new Ajax.Request('/some_url', {
  method:'get',
  requestHeaders: {Accept: 'application/json'},
  onSuccess: function(transport){
    var json = transport.responseText.evalJSON(true);
  }
});

evalJSON()인수로 true를 호출 하면 수신 문자열이 삭제됩니다.

이것은 문제인 것 같습니다.

Ajax websocket 등을 통해 수신 된 입력은 문자열 형식이지만 입력 여부는 알아야합니다 JSON.parsable. 문제는 항상 프로그램을 통해 실행 JSON.parse하면 프로그램이 "성공적으로"계속 될 수 있지만 여전히 콘솔에 dreaded 오류가 표시되는 것 "Error: unexpected token 'x'"입니다.

var data;

try {
  data = JSON.parse(jqxhr.responseText);
} catch (_error) {}

data || (data = {
  message: 'Server error, please retry'
});

jQuery를 사용하는 경우 다음 을 사용할 수도 있습니다.

$.getJSON(url, function(data) { });

그럼 당신은 같은 일을 할 수 있습니다

data.key1.something
data.key1.something_else

기타

$.ajax({
  url: url,
  dataType: 'json',
  data: data,
  success: callback
});

콜백은 반환 된 데이터를 전달합니다.이 데이터는 JSON 구조로 정의되고 $.parseJSON()메소드를 사용하여 구문 분석 된 JavaScript 오브젝트 또는 배열 입니다.

재미를 위해 다음은 함수를 사용하는 방법입니다.

 jsonObject = (new Function('return ' + jsonFormatData))()

사용은 JSON.parse아마도 가장 좋은 방법입니다.

다음은 라이브 데모 의 예 입니다.

var jsonRes = '{ "students" : [' +
          '{ "firstName":"Michel" , "lastName":"John" ,"age":18},' +
          '{ "firstName":"Richard" , "lastName":"Joe","age":20 },' +
          '{ "firstName":"James" , "lastName":"Henry","age":15 } ]}';
var studentObject = JSON.parse(jsonRes);

방법을 사용하는 가장 쉬운 parse()방법 :

var response = '{"result":true,"count":1}';
var JsonObject= JSON.parse(response);

그런 다음 JSON 요소의 값을 얻을 수 있습니다 (예 :

var myResponseResult = JsonObject.result;
var myResponseCount = JsonObject.count;

설명서에 설명 된대로 jQuery 사용 jQuery.parseJSON():

JSON.parse(jsonString);

이 Data 객체에 메서드를 사용해보십시오. 예 : Data='{result:true,count:1}'

try {
  eval('var obj=' + Data);
  console.log(obj.count);
}
catch(e) {
  console.log(e.message);
}

이 방법은 Nodejs에서 실제로 도움이됩니다. 은 직렬 포트 프로그래밍 작업을

"더 나은"방법을 찾았습니다.

CoffeeScript에서 :

try data = JSON.parse(jqxhr.responseText)
data ||= { message: 'Server error, please retry' }

자바 스크립트에서 :

var data;

try {
  data = JSON.parse(jqxhr.responseText);
} catch (_error) {}

data || (data = {
  message: 'Server error, please retry'
});

JSON 파싱은 항상 고통입니다. 입력이 예상과 다르면 오류가 발생하고 수행중인 작업이 충돌합니다.

다음과 같은 작은 기능을 사용하여 입력을 안전하게 구문 분석 할 수 있습니다. 입력이 유효하지 않거나 대부분의 경우에 더 나은 객체 인 경우에도 항상 객체를 전환합니다.

JSON.safeParse = function (input, def) {
  // Convert null to empty object
  if (!input) {
    return def || {};
  } else if (Object.prototype.toString.call(input) === '[object Object]') {
    return input;
  }
  try {
    return JSON.parse(input);
  } catch (e) {
    return def || {};
  }
};

JSON.parse(jsonString);

json.parse는 객체로 변경됩니다.

다음과 같은 문자열이 있다면 :

"{\"status\":1,\"token\":\"65b4352b2dfc4957a09add0ce5714059\"}"

그런 다음 JSON.parse이 문자열을 JSON 객체로 변환하기 위해 두 번 사용할 수 있습니다 .

var sampleString = "{\"status\":1,\"token\":\"65b4352b2dfc4957a09add0ce5714059\"}"
var jsonString= JSON.parse(sampleString)
var jsonObject= JSON.parse(jsonString)

다음을 사용하여 JSON 객체에서 값을 추출 할 수 있습니다.

// instead of last JSON.parse:
var { status, token } = JSON.parse(jsonString);

결과는 다음과 같습니다.

status = 1 and token = 65b4352b2dfc4957a09add0ce5714059

JSON.parse() 함수에 전달 된 모든 JSON 문자열을 JSON 객체로 변환합니다.

더 잘 이해하려면을 눌러 F12브라우저에서 "요소 검사"를 열고 콘솔로 이동하여 다음 명령을 작성하십시오.

var response = '{"result":true,"count":1}'; //sample json object(string form)
JSON.parse(response); //converts passed string to JSON Object.

이제 다음 명령을 실행하십시오 :

console.log(JSON.parse(response));

Object로 출력됩니다 {result: true, count: 1}.

해당 객체를 사용하기 위해 다음과 같은 변수에 객체를 할당 할 수 있습니다 obj.

var obj = JSON.parse(response);

사용하여 obj도트 ( .) 연산자는 JSON 객체의 속성에 액세스 할 수 있습니다.

다음 명령을 실행하십시오 :

console.log(obj.result);

공식 문서 :

이 JSON.parse()메소드는 JSON 문자열을 구문 분석하여 문자열로 설명되는 JavaScript 값 또는 오브젝트를 구성합니다. reviver결과 객체를 반환하기 전에 변환을 수행하기위한 선택적 함수를 제공 할 수 있습니다.

통사론:

JSON.parse(text[, reviver])

매개 변수 :

text : JSON으로 구문 분석 할 문자열입니다. JSON 구문에 대한 설명은 JSON 객체를 참조하십시오.

reviver (optional) : 함수 인 경우 파싱에 의해 원래 생성 된 값이 반환되기 전에 어떻게 변환되는지를 규정합니다.

반환 값

주어진 JSON 텍스트에 해당하는 Object입니다.

예외

구문 분석 할 문자열이 유효한 JSON이 아닌 경우 SyntaxError 예외가 발생합니다.

객체를 JSON으로 변환 한 다음 파싱하면 다음과 같이 작동합니다.

JSON.parse(JSON.stringify(object))

로 JSON 문자열을 구문 분석하면 JSON.parse()데이터가 JavaScript 객체가됩니다.

JSON.parse(jsonString)

여기서 JSON은 JSON 데이터 세트를 처리하는 것을 나타냅니다.

웹 서버에서이 텍스트를 받았다고 상상해보십시오.

'{ "name":"John", "age":30, "city":"New York"}'

JSON 객체로 구문 분석하려면 다음을 수행하십시오.

var obj = JSON.parse('{ "name":"John", "age":30, "city":"New York"}'); 

다음 obj은 각각의 JSON 객체입니다.

{ "name":"John", "age":30, "city":"New York"}

값을 가져 오려면 .연산자를 사용하십시오 .

obj.name // John
obj.age //30

로 JavaScript 객체를 문자열로 변환합니다 JSON.stringify().

다른 입력 유형에 대한 표지 구문 분석

JSON.parse ()로 데이터를 구문 분석하면 데이터가 JavaScript 객체가됩니다.

var obj = JSON.parse('{ "name":"John", "age":30, "city":"New York"}');

배열에서 파생 된 JSON에서 JSON.parse ()를 사용하면이 메서드는 JavaScript 객체 대신 JavaScript 배열을 반환합니다.

var myArr = JSON.parse(this.responseText);
console.log(myArr[0]);

날짜 객체는 JSON에서 허용되지 않습니다. Dates는 이와 같은 일을합니다.

var text = '{ "name":"John", "birth":"1986-12-14", "city":"New York"}';
var obj = JSON.parse(text);
obj.birth = new Date(obj.birth);

JSON에서는 함수를 사용할 수 없습니다. 함수를 포함해야 할 경우 문자열로 작성하십시오.

var text = '{ "name":"John", "age":"function () {return 30;}", "city":"New York"}';
var obj = JSON.parse(text);
obj.age = eval("(" + obj.age + ")");

오래된 질문이지만, 아무도 new Function()데이터를 반환하는 익명 함수를 사용 하여이 솔루션을 알지 못합니다 .

예를 들면 :

 var oData = 'test1:"This is my object",test2:"This is my object"';

 if( typeof oData !== 'object' )
  try {
   oData = (new Function('return {'+oData+'};'))();
  }
  catch(e) { oData=false; }

 if( typeof oData !== 'object' )
  { alert( 'Error in code' ); }
 else {
        alert( oData.test1 );
        alert( oData.test2 );
      }

이것은 함수 내에서 실행되며 코드에서 직접 컴파일하지 않기 때문에 조금 더 안전합니다. 따라서 내부에 함수 선언이 있으면 기본 창 객체에 바인딩되지 않습니다.

나는 이것을 사용하여 DOM 요소 (예 : data 속성)의 구성 설정을 간단하고 빠르게 '컴파일'합니다.

요약:

Javascript (브라우저 및 NodeJS)에는 내장 JSON객체가 있습니다. 이 Object에는을 다루는 두 가지 편리한 방법이 JSON있습니다. 그들은 다음과 같습니다.

1. JSON.parse() 소요 JSON , 인수로 JS 객체를 반환
2. JSON.stringify() 인수를 반환하는 JSON객체 로 JS 객체를 사용 합니다.

다른 응용 프로그램 :

매우 편리하게 다루는 것 외에도 JSON다른 수단으로 사용할 수 있습니다. 두 JSON방법을 조합 하면 배열이나 객체를 깊게 복제 할 수 있습니다. 예를 들면 다음과 같습니다.

let arr1 = [1, 2, [3 ,4]];
let newArr = arr1.slice();

arr1[2][0] = 'changed'; 
console.log(newArr); // not a deep clone

let arr2 = [1, 2, [3 ,4]];
let newArrDeepclone = JSON.parse(JSON.stringify(arr2));

arr2[2][0] = 'changed'; 
console.log(newArrDeepclone); // A deep clone, values unchanged

reviver기능을 사용 하여 필터링 할 수도 있습니다 .

var data = JSON.parse(jsonString, function reviver(key, value) {
   //your code here to filter
});

자세한 내용은를 참조하십시오 JSON.parse.

JSON.parse는 문자열을 객체로 변환하는 올바른 방법이지만 구문 분석 된 문자열이 객체가 아니거나 문자열이 올바르지 않으면 오류가 발생하여 코드의 나머지 부분이 중단됩니다. try-catch 안에 JSON.parse 함수를 래핑하는 데 이상적입니다.

try{
   let obj = JSON.parse(string);
}catch(err){
   console.log(err);
}

이것을 시도하십시오. 이것은 타자기로 작성되었습니다.

         export function safeJsonParse(str: string) {
               try {
                 return JSON.parse(str);
                   } catch (e) {
                 return str;
                 }
           }

/**
 * Safely turning a JSON string into an object
 *
 * @param {String} str - JSON String
 * @returns deserialized object, false if error
 */
export function jsonParse(str) {
  let data = null;
  try {
    data = JSON.parse(str);
  } catch (err) {
    return false;
  }
  return data;
}