JSON 문자열을 객체로 안전하게 변환

질문자 :Matt Sheppard

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

분명히 다음과 같이 안전하지 않게 이 작업을 수행할 수 있습니다.

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

하지만 이는 다른 코드를 포함하는 JSON 문자열에 취약하게 만듭니다. 단순히 평가하는 것은 매우 위험해 보입니다.

JSON.parse(jsonString) 는 합리적으로 최신 브라우저를 보장할 수 있는 한 순수한 JavaScript 접근 방식입니다.

Jonathan.

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

 let jsonObject = JSON.parse(jsonString);

---

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

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

 jQuery.parseJSON( jsonString );

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

Alex V

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

이 답변은 구식이며 위의 Jonathan의 답변 ( JSON.parse(jsonString) )이 이제 최고의 답변 입니다.

JSON.org 에는 JavaScript용 4가지 다른 언어를 포함하여 많은 언어에 대한 JSON 파서가 있습니다. 나는 대부분의 사람들이 json2.js 를 goto 구현으로 고려할 것이라고 생각합니다.

John

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

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

그리고 그것을 반전:

 var str = JSON.stringify(arr);

Ronald Coarite

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

Ajax websocket 등을 통해 수신되는 입력으로 String 형식이지만 JSON.parsable 인지 알아야 합니다. JSON.parse 통해 항상 실행 "Error: unexpected token 'x'" 와 함께 콘솔에 오류가 throw되는 것을 여전히 볼 수 있다는 것입니다.

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

Cody

다른 방법은 확실하지 않지만 Prototype(JSON 자습서) 에서 수행하는 방법은 다음과 같습니다.

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

evalJSON() 을 호출하면 들어오는 문자열이 삭제됩니다.

Mark Biek

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

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

그러면 다음과 같은 일을 할 수 있습니다.

 data.key1.something data.key1.something_else

등.

Leanan

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

콜백에는 반환된 데이터가 전달되며, 이 데이터는 JSON 구조에 의해 정의되고 $.parseJSON() 메서드를 사용하여 구문 분석되는 JavaScript 개체 또는 배열이 됩니다.

Prahlad

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

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

lessisawesome

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);

Bharath Kumaar

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

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

이 방법은 직렬 포트 프로그래밍으로 작업 할 때 Nodejs에서 정말 도움이 됩니다.

GPrathap

parse() 메서드를 사용하는 가장 쉬운 방법:

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

그런 다음 JSON 요소의 값을 가져올 수 있습니다. 예를 들면 다음과 같습니다.

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

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

 JSON.parse(jsonString);

Jorgesys

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

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' });

Dorian

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 || {}; } };

Tahsin Turkoz

JSON.parse(jsonString);

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

Shekhar Tyagi

다음과 같은 문자열이 있는 경우:

 "{\"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

Hamid Araghi

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));

{result: true, count: 1} 로 출력을 얻을 수 있습니다.

해당 Object를 사용하기 위해 변수, 아마도 obj 할당할 수 있습니다:

 var obj = JSON.parse(response);

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

다음 명령을 실행해 보십시오.

 console.log(obj.result);

Pushkar Kathuria

공식 문서 :

JSON.parse() 메서드는 JSON 문자열을 구문 분석하여 문자열이 설명하는 JavaScript 값 또는 객체를 구성합니다. 결과 객체가 반환되기 전에 변형을 수행하기 위해 선택적 reviver

통사론:

 JSON.parse(text[, reviver])

매개변수:

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

reviver (optional) : 함수인 경우 원래 구문 분석에 의해 생성된 값이 반환되기 전에 변환되는 방식을 지정합니다.

반환 값

주어진 JSON 텍스트에 해당하는 객체.

예외

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

Salomon Zhang

객체를 JSON으로 변환한 다음 구문 분석하면 다음과 같이 작동합니다.

 JSON.parse(JSON.stringify(object))

Liuver Reynier Durán Pérez

JSON.parse() 사용하여 JSON 문자열을 구문 분석하면 데이터가 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

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

Amitesh Bharti

다양한 입력 유형에 대한 커버 구문 분석

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에서 허용되지 않습니다. 날짜에 대해 다음과 같은 작업을 수행합니다.

 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 + ")");

MOnkey

더 오래된 질문이지만 아무도 데이터를 반환하는 익명 함수인 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 속성)의 구성 설정을 간단하고 빠르게 '컴파일'합니다.

Codebeat

요약:

Javascript(브라우저와 NodeJS 모두)에는 JSON 객체가 내장되어 있습니다. JSON 을 처리하기 위한 2가지 편리한 방법이 있습니다. 그것들은 다음과 같습니다:

1. JSON.parse() JSON 을 인수로 취하고 JS 객체를 반환합니다.
2. JSON.stringify() JS 객체를 인수로 JSON 객체를 반환합니다.

다른 응용 프로그램:

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

Willem van der Veen

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

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

자세한 내용은 JSON.parse 를 참조하세요.

Durgpal Singh

성능

이 질문에 대한 좋은 답변이 이미 있지만 성능이 궁금하여 오늘 2020.09.21 선택한 솔루션에 대해 Chrome v85, Safari v13.1.2 및 Firefox v80에서 MacOs HighSierra 10.13.6에서 테스트를 수행합니다.

결과

• eval/Function (A,B,C) 접근 방식은 Chrome에서 빠릅니다(그러나 큰 깊이의 개체 N=1000의 경우 충돌: "최대 스택 호출 초과)
• eval (A)은 모든 브라우저에서 빠름/중간 빠름
• JSON.parse (D,E)는 Safari 및 Firefox에서 가장 빠릅니다.

세부

4가지 테스트 케이스를 수행합니다.

• 여기 에서 작은 얕은 물체를 위해
• 여기 에서 작고 깊은 물체를 위해
• 여기 에서 크고 얕은 물체를 위해
• 여기 에서 크고 깊은 물체를 위해

위 테스트에 사용된 개체는 HERE에서 가져왔습니다.

 let obj_ShallowSmall = { field0: false, field1: true, field2: 1, field3: 0, field4: null, field5: [], field6: {}, field7: "text7", field8: "text8", } let obj_DeepSmall = { level0: { level1: { level2: { level3: { level4: { level5: { level6: { level7: { level8: { level9: [[[[[[[[[['abc']]]]]]]]]], }}}}}}}}}, }; let obj_ShallowBig = Array(1000).fill(0).reduce((a,c,i) => (a['field'+i]=getField(i),a) ,{}); let obj_DeepBig = genDeepObject(1000); // ------------------ // Show objects // ------------------ console.log('obj_ShallowSmall:',JSON.stringify(obj_ShallowSmall)); console.log('obj_DeepSmall:',JSON.stringify(obj_DeepSmall)); console.log('obj_ShallowBig:',JSON.stringify(obj_ShallowBig)); console.log('obj_DeepBig:',JSON.stringify(obj_DeepBig)); // ------------------ // HELPERS // ------------------ function getField(k) { let i=k%10; if(i==0) return false; if(i==1) return true; if(i==2) return k; if(i==3) return 0; if(i==4) return null; if(i==5) return []; if(i==6) return {}; if(i>=7) return "text"+k; } function genDeepObject(N) { // generate: {level0:{level1:{...levelN: {end:[[[...N-times...['abc']...]]] }}}...}}} let obj={}; let o=obj; let arr = []; let a=arr; for(let i=0; i<N; i++) { o['level'+i]={}; o=o['level'+i]; let aa=[]; a.push(aa); a=aa; } a[0]='abc'; o['end']=arr; return obj; }

아래 스니펫은 선택한 솔루션을 보여줍니다.

 // src: https://stackoverflow.com/q/45015/860099 function A(json) { return eval("(" + json + ')'); } // https://stackoverflow.com/a/26377600/860099 function B(json) { return (new Function('return ('+json+')'))() } // improved https://stackoverflow.com/a/26377600/860099 function C(json) { return Function('return ('+json+')')() } // src: https://stackoverflow.com/a/5686237/860099 function D(json) { return JSON.parse(json); } // src: https://stackoverflow.com/a/233630/860099 function E(json) { return $.parseJSON(json) } // -------------------- // TEST // -------------------- let json = '{"a":"abc","b":"123","d":[1,2,3],"e":{"a":1,"b":2,"c":3}}'; [A,B,C,D,E].map(f=> { console.log( f.name + ' ' + JSON.stringify(f(json)) )})

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> This shippet only presents functions used in performance tests - it not perform tests itself!

다음은 크롬에 대한 예시 결과입니다.

Kamil Kiełczewski

이것을 시도하십시오. 이것은 타이프스크립트로 작성되었습니다.

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

Supun Dharmarathne

/** * 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; }

山茶树和葡萄树

출처 : http:www.stackoverflow.com/questions/45015/safely-turning-a-json-string-into-an-object