I am having trouble handling a JSON
object at the client side of a Node.js
server using socket.io
.
This is how I'm sending the data (the file I'm reading has JSON format):
io.on('connection', function(socket){
console.log("A user connected");
fs.readFile('/.../file.json', 'utf-8', function(err, data){
socket.emit('news', JSON.stringify(data));
});
socket.on('disconnect', function(){
console.log("A user disconnected");
});
});
I call JSON.stringify
in order to give a readable format to the binary data
.
Now, in the client side, I have the following <script>
block inside the html's <body>
:
<script src="/socket.io/socket.io.js"></script>
<script type="text/javascript">
var socket = io();
socket.on('news', function(data){
var obj= JSON.parse(data);
$("#json").text(obj);
});
</script>
This runs fine, I have a paragraph <p id="json"></p>
which takes the whole block of text, but if I try to access an element of the parsed JSON and print it, e.g. the "timestamp" tag using console.log(obj.timestamp)
I get undefined
.
How can I handle the data I'm receiving so I can handle it as a regular JSON?
EDIT
This is the output of console.log(obj)
:
{
"timestamp": "Wed Aug 27 13:14:01 CEST 2014",
"devices": [
{
"A": {
"mac": "00:07:80:68:18:41",
"handles": [
{
"TxHandler1": "0418",
"TxHandler2": "020f00072a",
"TxHandler3": "bd",
"a": {
"hnd": "0x0010",
"uuid": "00002800-0000-1000-8000-00805f9b34fb",
"value": "0a 18 "
},
"b": {
"hnd": "0x0011",
"uuid": "00002803-0000-1000-8000-00805f9b34fb",
"value": "02 12 00 29 2a "
},
"c": {
"hnd": "0x0012",
"uuid": "00002a29-0000-1000-8000-00805f9b34fb",
"value": "56 4c "
},
"d": {
"hnd": "0x0013",
"uuid": "00002901-0000-1000-8000-00805f9b34fb",
"value": "46 41 "
},
"e": {
"hnd": "0x0014",
"uuid": "00002803-0000-1000-8000-00805f9b34fb",
"value": "02 15 00 24 2a "
},
"f": {
"hnd": "0x0015",
"uuid": "00002a24-0000-1000-8000-00805f9b34fb",
"value": "31 31 "
},
"g": {
"hnd": "0x0016",
"uuid": "00002901-0000-1000-8000-00805f9b34fb",
"value": "4d 4f 44 "
}
}
]
}
},
{
"B": {
"mac": "00:07:80:68:18:8E",
"handles": [
{
"TxHandler1": "0418",
"TxHandler2": "020f00072a",
"TxHandler3": "bd",
"a": {
"hnd": "0x0010",
"uuid": "00002800-0000-1000-8000-00805f9b34fb",
"value": "0a 18 "
},
"b": {
"hnd": "0x0011",
"uuid": "00002803-0000-1000-8000-00805f9b34fb",
"value": "02 12 00 29 2a "
},
"c": {
"hnd": "0x0012",
"uuid": "00002a29-0000-1000-8000-00805f9b34fb",
"value": "56 4c "
},
"d": {
"hnd": "0x0013",
"uuid": "00002901-0000-1000-8000-00805f9b34fb",
"value": "46 41 "
},
"e": {
"hnd": "0x0014",
"uuid": "00002803-0000-1000-8000-00805f9b34fb",
"value": "02 15 00 24 2a "
},
"f": {
"hnd": "0x0015",
"uuid": "00002a24-0000-1000-8000-00805f9b34fb",
"value": "31 31 "
},
"g": {
"hnd": "0x0016",
"uuid": "00002901-0000-1000-8000-00805f9b34fb",
"value": "4d 4f 44 "
}
}
]
}
}
]
}
which, according to JSON Lint, is a valid json, but still I'm getting undefined
when I try to access the "timestamp" tag
There should be no relation between the client and the server. The fact that you use node.js that happens to be JavaScript should have nothing to do with the client.
If you had the same action done in C# or Java, would it matter to the client?
Bottom line, step 1 should be verifying that you JSON object is received correctly on the client. Then, make sure you JSON is a valid object using a validator such as JSON Lint. If it's invalid, then the problem is on the server side. If not, you need to check your client side's parsing.
I was sending the wrong data format, the correct code is:
io.on('connection', function(socket){
console.log("A user connected");
fs.readFile('/.../file.json', 'utf-8', function(err, data){
socket.emit('news', data.toString());
});
socket.on('disconnect', function(){
console.log("A user disconnected");
});
});