When accessing a sub-array directly within an object, it transforms into a collection of nested objects

Question

When accessing a sub-array directly within an object, it transforms into a collection of nested objects

Is there a way to pass an array of objects to canvasJS? I am trying to include this array as part of a more complex object that is passed from PHP to a JS script. Here is my current approach:

var active_alarms_data = JSON.parse('<?php echo json_encode($activePriceAlarms,JSON_NUMERIC_CHECK);?>');

I also attempted:

var active_alarms_data = <?php echo json_encode($activePriceAlarms,JSON_NUMERIC_CHECK);?>;

Here is the structure of the main object:

https://i.sstatic.net/27cNq.png

The chart data can be found in the sub-array factory_made_avg_graph_prices_stats. While printing the entire object to the console, it seems that this field is correctly formatted as an array with 104 elements indexed from 0 to 103. This is what I need! However, when I try to access the array directly, I encounter something unexpected:

console.log("ELEMENT 0: " + active_alarms_data[i].graph.factory_made_avg_graph_prices_stats);

The output is different and the chart remains empty. It appears that the expected data format may not match the previous one. Any suggestions on how to resolve this issue?

javascript arrays object

Answer 1

Answer №1

Your code is perfectly fine.

Don't let the console log confuse you. The current method of accessing each element will work without any issues. The reason for seeing [object Object] is due to JavaScript attempting to convert non-strings to strings when using the '+' operator for concatenation.

You are simply viewing a string representation of each object in the array. To see just the array without "ELEMENT 0:", remove that part from the console log as shown below:

const obj = { test: [{ foo: 'bar' }] }
console.log('ELEMENT 0: ' + obj.test)
console.log(obj.test)

Alternatively, if you prefer to keep "Element 0" in the log, use a comma instead of direct concatenation like this:

const obj = { test: [{ foo: 'bar' }] }
console.log('ELEMENT 0:', obj.test)

Answer 2

Your code is perfectly fine.

Don't let the console log confuse you. The current method of accessing each element will work without any issues. The reason for seeing [object Object] is due to JavaScript attempting to convert non-strings to strings when using the '+' operator for concatenation.

You are simply viewing a string representation of each object in the array. To see just the array without "ELEMENT 0:", remove that part from the console log as shown below:

const obj = { test: [{ foo: 'bar' }] }
console.log('ELEMENT 0: ' + obj.test)
console.log(obj.test)

Alternatively, if you prefer to keep "Element 0" in the log, use a comma instead of direct concatenation like this:

const obj = { test: [{ foo: 'bar' }] }
console.log('ELEMENT 0:', obj.test)

Answer 3

Answer №2

Here is an example of a console output:

console.log("ELEMENT 0: " , 
active_alarms_data[i].graph.factory_made_avg_graph_prices_stats);

In the console, change the '+' to ','

Answer 4

Here is an example of a console output:

console.log("ELEMENT 0: " , 
active_alarms_data[i].graph.factory_made_avg_graph_prices_stats);

In the console, change the '+' to ','

When accessing a sub-array directly within an object, it transforms into a collection of nested objects

Answer №1

Answer №2

Similar questions

Error: You can't call .text as a function in jQuery

Assistance with JavaScript regular expressions for dividing a string into days, hours, and minutes (accounting for plural or singular forms)

Issue: (SystemJS) Unable to find solutions for all parameters in $WebSocket: ([object Object], [object Object], ?)

An error in the floating point has occurred while attempting to generate prime numbers

What is the best way to manage the package-lock.json file during deployment from git using SSH?

Retrieve JSON data from my PHP API within my Laravel application

The ultimate guide to loading multiple YAML files simultaneously in JavaScript

Check if the element with the ID "products" exists on the page using JQuery. If it does, then execute a certain action

Changing the background color of a page to match the background color of a button in React, which can be updated at any time

What could be the reason behind my useEffect() not triggering when updating a value in a React context?

Extract the links from the database using AngularJS

AngularJS: engaging search experience

Resolving the issue of nested modals within Bootstrap

What is the process for transmitting images from React Native to native modules?

The data displayed in the <span> element isn't reflecting the response from the loaded page, despite being visible in Firebug

Choosing a specific page number - kendo grid

Discovering the Modification of a Variable Value in angularJS

Saving integer data retrieved from DynamoDB in a React Native application

How can I rename attribute values in a dropdown menu and ensure they work properly?

How can I prevent dataTable resizing?