Deserializing JSON menjadi objek JavaScript

Saya memiliki string dalam aplikasi server Java yang diakses menggunakan AJAX. Itu terlihat seperti berikut ini:

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"
}];

Ketika string ditarik dari server, apakah ada cara mudah untuk mengubahnya menjadi objek JavaScript (atau array) yang hidup? Atau apakah saya harus membagi string secara manual dan membangun objek secara manual?

Dukungan browser modern JSON.parse().

var arr_from_json = JSON.parse( json_string );

Dalam browser yang tidak, Anda dapat menyertakan satu json2perpustakaan .

Inti dari JSON adalah bahwa string JSON dapat dikonversi ke objek asli tanpa melakukan apa pun. Periksa tautan ini

Anda dapat menggunakan salah satu eval(string)atau JSON.parse(string).

Namun, evalberisiko. Dari json.org:

Fungsi eval sangat cepat. Namun, itu dapat mengkompilasi dan menjalankan program JavaScript apa pun, sehingga bisa ada masalah keamanan. Penggunaan eval ditunjukkan ketika sumbernya dipercaya dan kompeten. Jauh lebih aman untuk menggunakan parser JSON. Dalam aplikasi web melalui XMLHttpRequest, komunikasi hanya diizinkan untuk asal yang sama yang menyediakan halaman itu, sehingga dipercaya. Tapi itu mungkin tidak kompeten. Jika server tidak teliti dalam pengkodean JSON-nya, atau jika tidak dengan teliti memvalidasi semua inputnya, maka itu bisa mengirimkan teks JSON tidak valid yang bisa membawa skrip berbahaya. Fungsi eval akan menjalankan script, melepaskan kebenciannya.

Lakukan seperti jQuery! (esensi)

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

Dengan cara ini Anda tidak memerlukan pustaka eksternal dan masih berfungsi di browser lama.

UNTUK mengumpulkan semua item array dan mengembalikan objek 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;
    },

UNTUK mem-parse data yang sama yang kita lalui seperti ini

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

}

Anda juga bisa menggunakan eval()tetapi JSON.parse()lebih aman dan lebih mudah, jadi mengapa Anda mau?

bagus dan bekerja

var yourJsonObject = JSON.parse(json_as_text);

Saya tidak melihat alasan mengapa Anda lebih suka menggunakannya eval. Itu hanya menempatkan aplikasi Anda dalam risiko.

Yang mengatakan - ini adalah juga mungkin.

buruk - tetapi juga berfungsi

var yourJsonObject = eval(json_as_text);

Mengapa itu evalide yang buruk?

Perhatikan contoh berikut.

Beberapa pihak ketiga atau pengguna menyediakan data string 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"
}]
`;

Skrip sisi server Anda memproses data itu.

Menggunakan JSON.parse:

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

akan melempar:

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

Fungsi tidak akan dieksekusi.

Kamu aman.

Menggunakan eval():

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

akan menjalankan fungsi dan mengembalikan teks.

Jika saya mengganti fungsi yang tidak berbahaya itu dengan yang menghapus file dari folder situs web Anda, Anda telah diretas. Tidak ada kesalahan / peringatan akan dilemparkan dalam contoh ini.

Anda TIDAK aman.

Saya bisa memanipulasi string teks JSON sehingga berfungsi sebagai fungsi yang akan dijalankan di server.

eval(JSON)[0].adjacencies[0].nodeTo mengharapkan untuk memproses string JSON tetapi, pada kenyataannya, kami baru saja menjalankan suatu fungsi pada server kami.

Ini juga bisa dicegah jika kita sisi server memeriksa semua data yang disediakan pengguna sebelum meneruskannya ke eval()fungsi tetapi mengapa tidak hanya menggunakan alat bawaan untuk mem-parsing JSON dan menghindari semua masalah dan bahaya ini?

Dan jika Anda juga ingin objek deserialised memiliki fungsi, Anda dapat menggunakan alat kecil saya: 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());

Jika Anda menempelkan string di sisi server ke html tidak perlu melakukan apa pun:

Untuk java biasa di jsp:

var jsonObj=<%=jsonStringInJavaServlet%>;

Untuk strut lebar jsp:

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

Saya pikir ini akan membantu:

Selain itu, dokumentasi juga membuktikan bahwa Anda dapat menggunakan require () untuk file json: https://www.bennadel.com/blog/2908-you-can-use-require-to-load-json-javascript-object-notation-files -in-node-js.htm

var jsonfile = require("./path/to/jsonfile.json");
node = jsonfile.adjacencies.nodeTo;
node2 = jsonfile.adjacencies.nodeFrom;
node3 = jsonfile.adjacencies.data.$color;
//other things.