Unleashing the Array within a JavaScript Object

Question

Unleashing the Array within a JavaScript Object

Currently, I am successfully receiving messages from a Server via Websocket. The received messages are in the form of a Javascript Object, and my goal is to extract the necessary data from it and update the state of my React app accordingly.

Here is the code snippet I am currently using:

connection.onmessage = function (newMessage) {

        if(newMessage.data == '{"msg":"ping"}' ){
            connection.send('{"msg": "pong"}')
        }

        newMessage = JSON.parse(newMessage.data)
        console.log(newMessage.fields)       
    }

After receiving the message, I am logging the 'fields' property of the parsed object.

To see the actual object that I am working with, you can visit this Javascript Object.

Specifically, I am interested in the Array located at args/0. How can I extract this array from the object?

Thank you for your help.

javascript arrays websocket javascript-objects

Answer 1

Answer №1

It might not be the best approach to modify newMessage within your connection.onmessage function. Adding more logging when receiving a new message could also be beneficial. Have you considered giving this version a try?

connection.onmessage = function (newMessage) {
    console.log("Received new message :", newMessage.data);

    if(newMessage.data == '{"msg":"ping"}' ){
        connection.send('{"msg": "pong"}')
    }

    var parsedMessage = JSON.parse(newMessage.data);

    if (parsedMessage.msg === "changed") {
        console.log("Received changed message :", parsedMessage.fields.args); 
    }
}

I hope this suggestion proves helpful!

Answer 2

It might not be the best approach to modify newMessage within your connection.onmessage function. Adding more logging when receiving a new message could also be beneficial. Have you considered giving this version a try?

connection.onmessage = function (newMessage) {
    console.log("Received new message :", newMessage.data);

    if(newMessage.data == '{"msg":"ping"}' ){
        connection.send('{"msg": "pong"}')
    }

    var parsedMessage = JSON.parse(newMessage.data);

    if (parsedMessage.msg === "changed") {
        console.log("Received changed message :", parsedMessage.fields.args); 
    }
}

I hope this suggestion proves helpful!

Answer 3

Answer №2

To retrieve the 'args' information from the JSON object, you can simply use 'newMessage.args'

var newMessage = {eventName: 'aname', args: ['data1','data2'] }
document.getElementById('output').innerHTML = newMessage.args

<div id='output'></div>

Answer 4

To retrieve the 'args' information from the JSON object, you can simply use 'newMessage.args'

var newMessage = {eventName: 'aname', args: ['data1','data2'] }
document.getElementById('output').innerHTML = newMessage.args

<div id='output'></div>

Unleashing the Array within a JavaScript Object

Answer №1

Answer №2

Similar questions

Using the spread operator in React to distribute JSX elements within a map function

Updating item information within an array in Vue.js

using app.use to directly pass arguments without delay (NODE.JS)

Find the difference between the sum of diagonals in a 2D matrix using JavaScript

Using JavaScript functions on HTML data loaded by the jQuery.append() method: A guide

The useEffect() method used without any cleanup function

Failure to receive results from $.getJSON request

Retrieve the data-src attribute from the lightGallery plugin

Tips for creating a unique custom UI headline using ReactJS, CSS, and bootstrap

Arranging JSON based on values in an array using node.js

Persistent change issue with JQuery CSS function

There seems to be a limitation in JS/JQuery where it is unable to append HTML that spans

execute function following ng-repeat

Dropdown menu featuring a customizable input field

Reorganize code in JavaScript and TypeScript files using VSCode

How to use jQuery Animate to create a step-by-step animation with image sprites?

Model with no collection involved

Best resolutions and formats for Nativescript-Vue application icons

Activate a dropdown menu following the selection of a date on a calendar input using vue.js

Emphasize sections of text within a chart