在Javascript中解析json并在html上创建表

Question

I have the following json file which in am reading with code below.

{
    "17.216.30.177": {
        "agent": {
            "agent_ip": "17.216.30.177",
            "agent_cpu_type": "Intel Core i5",
            "agent_serial_num": "C02KQ00CFH46",
            "agent_hostname": "Beautiful-iMac.local",
            "agent_ram": "16 GB",
            "agent_processors": "4",
            "agent_system_type": "iMac14_2"
        },
        "devices": {
            "fedaa89792fdf9bcfe819cc9981bcda918dc1fa6": {
                "SerialNumber": "",
                "HardwareModel": "abc",
                "WiFiAddress": "abc",
                "BuildVersion": "abc",
                "kanzi": "315D0F",
                "current_state": 1,
                "UniqueChipID": "612806844428"
            },
            "47d46975e929d679f1c0713f7b060bf80390aeb9": {
                "SerialNumber": "",
                "HardwareModel": "lmn",
                "WiFiAddress": "lmn",
                "BuildVersion": "lmn",
                "kanzi": "315DF3",
                "current_state": 1,
                "UniqueChipID": "2572890213651"
            }
        },
        "last_alive_time": "2016-04-27 10:24:14"
    },
    "17.153.73.241": {
        "agent": {
            "agent_hostname": "aj-air.local",
            "agent_cpu_type": "Intel Core i5",
            "agent_processors": "2",
            "agent_ip": "17.244.49.99",
            "agent_serial_num": "C02M300KFY3V",
            "agent_system_type": "MacBookAir6_2",
            "agent_ram": "8 GB"
        },
        "devices": {
            "ccd457202545bef923e2d784f0aa30e12c4dfd43": {
                "HardwareModel": "pqr",
                "kanzi": "pqr",
                "SerialNumber": "",
                "current_state": 1,
                "UniqueChipID": "pqr",
                "WiFiAddress": "pqr",
                "BuildVersion": "pqr"
            }
        },
        "last_alive_time": "2016-04-27 10:30:08"
    }
}   


    function readTextFile(file, callback) {
            var rawFile = new XMLHttpRequest();
            rawFile.overrideMimeType("application/json");
            rawFile.open("GET", file, true);
            rawFile.onreadystatechange = function() {
            if (rawFile.readyState === 4 && rawFile.status == "200") {
                callback(rawFile.responseText);
            }
        }
        rawFile.send(null);
    }


    readTextFile("/resources/test.json", function(text){
        var data = JSON.parse(text);
        document.getElementById("demo").innerHTML = data[0]["agent"].agent_ip;
    });

data[0].17.216.30.177["agent"].agent_ip ;

how can I make this work?

Ff it was data[0].xyz["agent"].agent_ip; , it works well but because of period in ip, it doesn't

Answer 1

i am able to read json file into object but not able to get specific key values. I get this file as is from server hence cant have array with [] if that';s causing aproblem.

The problem in this is that you are accessing it like an array, but you do not have an array of objects. So, you can convert the file you receive into an array, or you can take the objects as they are and change the way you access them.

You main issue will be the fact that each one has a unique key that you will need to reference in order to access the data. If you know they keys ahead of time, you use them like an associative array. You can access each property by the '.' operator.

data["17.153.73.241"].agent.agent_ip; //Agent 2

Otherwise, you will need to find the key for each one and use it to access that object.

data[key].agent.agent_ip

I have taken put it in a jsfiddle on how to access the objects with a key for this situation.

References:

1. Accessing elements of JSON object without knowing the key names
2. iterating through json object javascript
3. Access / process (nested) objects, arrays or JSON

Answer 2

        readTextFile("/resources/test.json", function(text){
            var data = JSON.parse(text);
            for (var key in data) {
                console.log("Agent IP-->", data[key].agent.agent_ip);
                console.log("Number of devices -->", Object.keys(data[key].devices).length);
                console.log("Total Number of devices -->", Object.keys(data[key].devices).length);
            }

this worked for me.