How to push the item to json file?

Question

I'm pretty newbie in javascript and want to know how to push value to json. I tried to look over in google but couldn't find any solutions that I wanted.

here is my code for pushing in javascript.

var jsonfile = {channel: []};
function WebSocket(){
  if ("WebSocket" in window){
    var channel = "hello";
    var socket = io.connect("my socket address");

    socket.on(channel, function (d) {
      var data = JSON.parse(d);
      //console.log(channel + " : " + d);
      var theDiv = document.getElementById(data.node_info[1].info.mac);
      if(theDiv == null) {
        var divTag = document.createElement("div");
        divTag.id = data.node_info[1].info.mac;   //"drag1"
        divTag.className = "draggable js-drag";
        divTag.innerHTML = data.node_info[1].info.mac;
        document.getElementsByTagName('body')[0].appendChild(divTag);
        jsonfile.channel.push(divTag.id);
        console.log(jsonfile)
        //console.log(jsonfile.channel.length);
        //$('#'+data.node_info[1].info.mac).load('#'+data.node_info[1].info.mac);
      }
    });
    socket.on('crc_err', function(packet){
      console.log("crc_err : " + packet);
    });
    socket.on('type_err', function(packet){
      console.log("type_err : " + packet);
    });
  }
  else{
                // The browser doesn't support WebSocket
                // alert("WebSocket NOT supported by your Browser!");
      }
  }

I'm pushing mac address from webSocket to var jsonfile and then wanted to push other values to that mac address like code below

for (i = 0; i <= jsonfile.channel.length; i++){
  if($(jsonfile.channel[i]).css('left') != 0){
    jsonfile.channel[i].push([$(jsonfile.channel[i]).css('left')]); ------>ERROR
    console.log(jsonfile.channel[i]);
  }

However, it gives me an error with Uncaught TypeError: jsonfile.channel[i].push is not a function

I want it to be like pushing style (left value) of div in to that mac address.

jsonfile = {channel: ["B8:27:EB:FF:7B:45" : [$(jsonfile.channel[i]).css('left')]]}

How can I solve this issue...? Does anybody help me out here?

Thanks in advance.

Answer 1

In this case, jsonfile.channel is an array, which has a push method in its prototype chain.

Array.push adds new items to the end of an array. The data structure you are trying to use is not valid javascript. An array in JavaScript can hold many different data types, but it is a simple data structure; there is no idea of association in an array. An array is simply an ordered list of values, starting with the item at element 0 and ending with the item at element n, where n is the length of the array (-1, since we are starting at 0).

In this case, you are pushing a string value (the mac address) into the "jsonfile.channel" array. A String value does not have a "push" method, hence the error that you are seeing jsonfile.channel[i].push is not a function .

What I think you want, is to use a nested object, which would give you the option to store multiple associative values, so the following:

jsonfile = {channel:{"B8:27:EB:FF:7B:45": $(jsonfile.channel[i]).css('left')}}

If you want to add to the new object, you can simply do:

jsonfile.channel['XX:XX:XX:XX:XX:XX'] = $(jsonfile.channel[i]).css('right')

Where XX:XX:XX:XX:XX:XX is the keyname for the item in the jsonfile.channel object.

I would recommend you read up on the different JavaScript datatypes to find something that will best suit your needs. It would be a wise investment of time to take one of the many free JavaScript intro courses available on the web.

I hope this is useful. Feel free to follow up if anything is unclear.