[javascript] JSON을 JavaScript 객체로 역 직렬화

AJAX를 사용하여 액세스하는 Java 서버 응용 프로그램에 문자열이 있습니다. 다음과 같이 보입니다 :

var json = [{
    "adjacencies": [
        {
          "nodeTo": "graphnode2",
          "nodeFrom": "graphnode1",
          "data": {
            "$color": "#557EAA"
          }
        }
    ],
    "data": {
      "$color": "#EBB056",
      "$type": "triangle",
      "$dim": 9
    },
    "id": "graphnode1",
    "name": "graphnode1"
},{
    "adjacencies": [],
    "data": {
      "$color": "#EBB056",
      "$type": "triangle",
      "$dim": 9
    },
    "id": "graphnode2",
    "name": "graphnode2"
}];

문자열을 서버에서 가져 오면이를 살아있는 JavaScript 객체 (또는 배열)로 쉽게 전환 할 수 있습니까? 아니면 문자열을 수동으로 분할하고 수동으로 객체를 만들어야합니까?

답변

최신 브라우저 지원 JSON.parse().

var arr_from_json = JSON.parse( json_string );

하지 않는 브라우저에서는 포함 할 수 라이브러리를 .json2

답변

JSON의 요점은 JSON 문자열을 아무 것도하지 않고 네이티브 객체로 변환 할 수 있다는 것입니다. 이 링크를 확인

당신도 사용할 수 있습니다 eval(string)또는 JSON.parse(string).

그러나 eval위험합니다. json.org에서 :

평가 기능은 매우 빠릅니다. 그러나 모든 JavaScript 프로그램을 컴파일하고 실행할 수 있으므로 보안 문제가있을 수 있습니다. 출처를 신뢰할 수 있고 유능한 경우 eval의 사용이 표시됩니다. JSON 파서를 사용하는 것이 훨씬 안전합니다. XMLHttpRequest를 통한 웹 응용 프로그램에서는 해당 페이지를 제공하는 동일한 원본에만 통신이 허용되므로 신뢰할 수 있습니다. 그러나 유능하지 않을 수도 있습니다. 서버가 JSON 인코딩이 엄격하지 않거나 모든 입력을 철저하게 확인하지 않으면 위험한 스크립트를 전달할 수있는 잘못된 JSON 텍스트를 전달할 수 있습니다. eval 함수는 악의를 불러 일으키면서 스크립트를 실행합니다.

답변

jQuery처럼하세요! (본질)

function parseJSON(data) {
    return window.JSON && window.JSON.parse ? window.JSON.parse( data ) : (new Function("return " + data))();
}
// testing
obj = parseJSON('{"name":"John"}');
alert(obj.name);

이렇게하면 외부 라이브러리가 필요 없으며 여전히 오래된 브라우저에서 작동합니다.

답변

배열의 모든 항목을 수집하고 json 객체를 반환하려면

collectData: function (arrayElements) {

        var main = [];

        for (var i = 0; i < arrayElements.length; i++) {
            var data = {};
            this.e = arrayElements[i];
            data.text = arrayElements[i].text;
            data.val = arrayElements[i].value;
            main[i] = data;
        }
        return main;
    },

이 같은 데이터를 파싱하려면

dummyParse: function (json) {
        var o = JSON.parse(json); //conerted the string into JSON object        
        $.each(o, function () {
            inner = this;
            $.each(inner, function (index) {
                alert(this.text)
            });
        });

}

답변

당신은 또한 사용할 수 eval()있지만 JSON.parse()더 안전하고 쉬운 방법입니다, 왜 당신은 하시겠습니까?

좋은 일

var yourJsonObject = JSON.parse(json_as_text);

왜 당신이 선호하는 이유는 없습니다 eval. 응용 프로그램이 위험에 처할뿐입니다.

즉 말했다 -이 입니다 도 가능합니다.

나쁜-또한 작동

var yourJsonObject = eval(json_as_text);

왜 eval나쁜 생각입니까?

다음 예를 고려하십시오.

일부 타사 또는 사용자가 JSON 문자열 데이터를 제공했습니다.

var json = `
[{
    "adjacencies": [
        {
          "nodeTo": function(){
            return "delete server files - you have been hacked!";
          }(),
          "nodeFrom": "graphnode1",
          "data": {
            "$color": "#557EAA"
          }
        }
    ],
    "data": {
      "$color": "#EBB056",
      "$type": "triangle",
      "$dim": 9
    },
    "id": "graphnode1",
    "name": "graphnode1"
},{
    "adjacencies": [],
    "data": {
      "$color": "#EBB056",
      "$type": "triangle",
      "$dim": 9
    },
    "id": "graphnode2",
    "name": "graphnode2"
}]
`;

서버 측 스크립트는 해당 데이터를 처리합니다.

사용 JSON.parse:

window.onload = function(){
  var placeholder = document.getElementById('placeholder1');
  placeholder.innerHTML = JSON.parse(json)[0].adjacencies[0].nodeTo;
}

던질 것입니다 :

Uncaught SyntaxError: Unexpected token u in JSON at position X.

기능이 실행되지 않습니다.

당신은 안전합니다.

사용 eval():

window.onload = function(){
  var placeholder = document.getElementById('placeholder1');
  placeholder.innerHTML = eval(json)[0].adjacencies[0].nodeTo;
}

함수를 실행하고 텍스트를 반환합니다.

그 무해한 기능을 웹 사이트 폴더에서 파일을 제거하는 기능으로 바꾸면 해킹당한 것입니다. 이 예제에서는 오류 / 경고가 발생하지 않습니다.

당신은 안전하지 않습니다.

JSON 텍스트 문자열을 조작하여 서버에서 실행될 함수로 작동 할 수있었습니다.

eval(JSON)[0].adjacencies[0].nodeTo JSON 문자열을 처리 할 것으로 예상되지만 실제로는 서버에서 함수를 실행했습니다.

eval()함수로 전달하기 전에 모든 사용자 제공 데이터를 서버 측에서 확인 하지만 JSON 구문 분석을 위해 기본 제공 도구를 사용 하여이 모든 문제와 위험을 피하는 것이 어떻습니까?

답변

그리고 역 직렬화 된 객체에 함수가 있기를 원하면 작은 도구를 사용할 수 있습니다. https://github.com/khayll/jsmix

//first you'll need to define your model
var GraphNode = function() {};
GraphNode.prototype.getType = function() {
   return this.$type;
}

var Adjacency = function() {};
Adjacency.prototype.getData =n function() {
    return this.data;
}

//then you could say:
var result = JSMix(jsonData)
    .withObject(GraphNode.prototype, "*")
    .withObject(Adjacency.prototype, "*.adjacencies")
    .build();

//and use them
console.log(result[1][0].getData());

답변

서버 측의 문자열을 HTML에 붙여 넣으면 아무것도 할 필요가 없습니다.

jsp의 일반 Java의 경우 :

var jsonObj=<%=jsonStringInJavaServlet%>;

jsp 너비 스트럿의 경우 :

var jsonObj=<s:property value="jsonStringInJavaServlet" escape="false" escapeHtml="false"/>;