Convert Array of Arrays into Object with key-value pair in Javascript (Data from websocket)

So in one of my project, I faced a challenge in JavaScript which i would like to share with you guys.

The Challenge

From a websocket, I was getting the data in the multidimensional array i.e I was getting Array of arrays. I was working on a react project and the data was in the following format:

let data = [[name,price],[name,price],[name,price] ...];

Now if you see the data, it’s just name and price and there is no need of such format for holding the data. It should be given in the following format for the ease of the project:

let data = {name:price,name:price,name:price ...};

Another problem with the array was that I was getting the updated [name,price] array multiple times in the same array. Let me clear it with an example

so,

I have an array [[a,10],[b,20],[c,30]] that i got from the socket. So as long as the connection is open with the socket, I will get the updated price changes for each name i.e on next socket event , I will get a new array like [[a,30],[b,10]] and then again another array like [[c,50]] and so on. This is another challenge i have to over come. I have to check the new array I get each time from the socket, compare it with the data that I have already and then update the price of the “name” I already have. If I don’t have the “name” from the new array i have to add it to the list.

So here is the approach i took to fix this issue:

Image result for joker here we go gif

Connecting to the socket

First, I connected to the socket on component did mount method and in it’s on message event, I am looping through the data with forEach method to get each array inside the parent array. Look into the snippet below for better understanding.

Using ForEach

As you can see I am destructuring the value i get in each array of forEach as “name” and “price”. Now inside the for each function, I am setting the state of the component with the data i am receiving as follows:

Once this is set, on each “onmessage” event of the websocket, the data object in the component’s state is updated with the latest data. As you can see, while updating i am receiving the previous state of the component inside setState method, and i am keeping the copy of the data object in previous state. Thus, if the new data has any additional key apart from the ones in previous object, those are updated into the state. At the same time, the price of the existing keys in the object are updated, if there are any.

Updating render method

Once this is done processed on component did mount method, The component’s render method will receive realtime data which can be displayed directly as follows:

In the above code, I am destructuring the components state to get the constant data. Then I am extracting the object’s keys into an array and then mapping through the array using .map method and using each key to access its price in the data object.

Conclusion

I really loved solving this problem. Its was a really good moment when the app was rendering the name and price and was getting updated simultaneously.

If you want to deepdive into the implementation, you can find the project in wghich i used the above code, here. I have deployed the project here.

Hope you guys learned something new from this article. If you have any doubts or suggestions, you can always comments below. If you want to stay updated of my articles, you can register on my site here.

25
25