Check out this code:
let example = [];
example.someData = "wow";
console.log(example); // output: [ someData: 'wow' ]
console.log(JSON.stringify(example)); // output: []
console.log(example.someData); // output: wow
console.log(JSON.stringify(example)); // output: []Can you explain why console.log(example) returns an object, while the following line
console.log(JSON.stringify(example))As pointed out by @jonrsharpe, JSON cannot accurately represent an array with additional properties.
Nevertheless, if you find yourself needing to convert such an array into JSON and then back, you can employ the following technique:
let example = [4,5,6]
example.someProp = 'haha'
let jsonData = JSON.stringify(Object.assign({}, example))
console.log(jsonData)
let example2 = Object.assign([], JSON.parse(jsonData))
console.log(example2)
console.log(example2.someProp)
console.log(Array.isArray(example2))
console.log(example2.length)let example = [];
example.someKey = "hello";
console.log(example); // result: []
console.log(JSON.stringify(example)); // result: []
console.log(example.someKey); // result: hello
console.log(JSON.stringify(example)); // result: []Arrays in JavaScript are actually objects with numeric keys. Since they are treated as objects, they can have properties like your someKey. Adding a property to an array does not add an element (which would require a numeric index). This explains why you may see [someKey: 'hello']. Some consoles use property names and values to display the object for debugging purposes. When you access test.someKey, it accesses only the specific property you requested.
When you use JSON.stringify, it only converts the array elements into the JSON string since you called it on the array itself. This is why you once again see an empty array [] after stringifying it.
Simply put, this excerpt from MDN provides insight into the topic at hand:
In JavaScript, arrays are not primitive data types but rather instances of the Array object.
An Array remains an Array. It is, and has always been, an Object as well. How a specific type of Object is converted to JSON typically relies on the toJSON() method of its prototype. However, in the case of the Array (as a built-in type), it is considered a special case with its default implementation. This default behavior does not include the length property of the Array in the resulting string output; instead, it uses the [...] format that you observe.
My WebSocket server implementation is quite simple: const WebSocket = require('ws'); const wss = new WebSocket.Server( { server: server, path: "/ws" }); wss.on('connection', function connection(ws, req) { console.log("Connect ...
I am currently attempting to utilize the Wiktionary API in order to retrieve both synonyms and antonyms. The responses I am receiving are a bit unclear at the moment. This is the code I have implemented: $(document).ready(function() { var page= $( thi ...
I'm currently using the node sequelize library to handle data insertion in a postgress database. Below is the user model defined in the Users.ts file: export class User extends Sequelize.Model { public id!: number; public name: string; public ...
Can I add multiple v-on:click events to the same element? I want to toggle a navigation menu and trigger a CSS animation on the element that toggles the navigation. <template> <div> <nav v-if="visible"> <ul&g ...
I'm currently facing an issue with the Semantic-UI searchable dropdown and Vuejs data binding. It seems like only one changed option is being model-bound, no matter which dropdown option I select. Here's a snippet of my code. I attempted to use ...
I am working on updating the price field for a specific object. Below is my selectedCurrenciesArray: const [selectedSwapCurrencies, setSelectedSwapCurrencies] = useState([ { symbol: null, logo: null, price: 0 }, { ...
First and foremost, I want to clarify that I am utilizing the latest version of jQuery and not jQuery-UI. Below is the list I am working with: <ul id="audio_list"> <li id="trackid_1"></li> <li id="trackid_5"></li> ...
Below is a snippet of my code: ... type RepairsState = { data: Property[] /* Property object from external file */ } type RepairsPropertyLoadAction = { type: typeof REPAIRS_PROPERTY_LOAD payload: { models: Property[] } /* payload will contain an a ...
My current service subscription is making a promise: getTaskData = async() { line 1 let response = this.getTaskSV.getTaskData().toPromise(); line 2 this.loading = false; } I attempted the following approach: it('should load getTaskData', ...
I am trying to create a div container with a scroll overflow that contains multiple child elements. I want the child elements to behave like a list, scrolling continuously so that once the user reaches the bottom, the top items reappear from the bottom as ...
I am currently in the process of developing a Node script that will establish a connection with an external server's MongoDB and add a new user. This is pretty basic stuff that I have encountered in numerous tutorials while using localhost. However, I ...
As I work on refining a solution for fizzbuzz to generate an array of numbers and strings, I encountered an issue where the return statement only outputs an empty array. Interestingly, when I print the array to the console, it appears as intended with all ...
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=de ...
Currently facing an issue with my Chrome extension where I am using angularJS in the popup. My goal is to retrieve the URL of the active tab and display it in the popup. Here is the code snippet I am using to achieve this: var link; var query = { active: ...
Recently I came across a fascinating challenge. I needed to establish communication between a web browser client and my ExpressJS server using web sockets to quickly display updates made on another client. Additionally, I relied on a standard HTTP connect ...
I've encountered an issue with my public_html directory where there is a folder named blog that is unrelated to my NextJs app. After deploying the app on the host, everything works fine until I try to access the blog section using the following URL: w ...
I'm currently facing an issue with my table that has clickable row headers for sorting functionality using the onRequestSort function. Unfortunately, it seems like this feature is not working as expected. I have implemented the sorting logic using rea ...
Currently, my goal is to use AJAX to load new content and replace the existing content on the page with this newly downloaded information. However, I am facing an issue in binding the load(handler(eventObject)) event for the replaced data. My requirement i ...
I'm facing a challenge in changing the color of text when someone hovers over it, but so far I've only been able to make it work if the mouse scrolls over the top border of the text. The text I'm testing is located in the top left corner an ...
I am currently developing an application using Angular on the front-end and ASP.NET on the back-end. Within this application, there are two roles: user and admin. I have implemented a navigation bar with several buttons that I need to hide based on the use ...