Looking to retrieve information stored in a JSON stringified object

Question

Looking to retrieve information stored in a JSON stringified object

Struggling with accessing the selected cell from an addListener event in Google Visualization Calendar is my current challenge. By utilizing

JSON.stringify(chart.getSelection());

, I am able to successfully print out the selected cell, which appears as [{"date":1468195200000,"row":0}].

The issue I am facing revolves around accessing the date object within this selection. My attempt to access it using the following code snippet:

var obj = JSON.stringify(chart.getSelection());
console.log('selected value ' + obj.date);

However, it outputs as Undefined. When I print out the obj, it presents as [object, object]. Any advice or direction on how to properly access this date object would be greatly appreciated. Please reach out if further information is required.

javascript json onclick google-visualization

Answer 1

Answer №1

Utilizing JSON.stringify() allows for the serialization of a data object into string format. One can easily access the object directly following this serialization process.

Let data = chart.getSelection()[0]; // assuming only a single item exists in the selection array.
console.log(data.date)

Answer 2

Utilizing JSON.stringify() allows for the serialization of a data object into string format. One can easily access the object directly following this serialization process.

Let data = chart.getSelection()[0]; // assuming only a single item exists in the selection array.
console.log(data.date)

Answer 3

Answer №2

Give this a shot:

let info = [{"date":1468195200000,"row":0}]

let rowSelection = info[0].row;
let dateSelection = new Date(info[0].date);

console.log(rowSelection);
console.log(dateSelection);

Answer 4

Give this a shot:

let info = [{"date":1468195200000,"row":0}]

let rowSelection = info[0].row;
let dateSelection = new Date(info[0].date);

console.log(rowSelection);
console.log(dateSelection);

Answer 5

Answer №3

Be cautious when directly accessing the first element of an array while listening for the 'select' event.

chart.getSelection()[0]

The 'select' event is triggered both when a selection is made and when it is removed.

Therefore, the line above will encounter issues when the selection is removed.

Ensure to check the length before attempting to access the array.

  selection = chart.getSelection();
  // Verify the selection length
  if (selection.length > 0) {
    console.log(selection[0].date);
  } else {
    console.log('selection removed');
  }

Below is a functional snippet: select a date, then select again to remove the selection...

google.charts.load('current', {
  callback: function () {
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'date', id: 'Date' });
    dataTable.addColumn({ type: 'number', id :'Score' });
    dataTable.addRows([
      [ new Date(2016, 3, 13), 101 ],
      [ new Date(2016, 3, 14), 102 ],
      [ new Date(2016, 3, 15), 103 ],
      [ new Date(2016, 3, 16), 104 ],
      [ new Date(2016, 3, 17), 105 ]
    ]);

    var chart = new google.visualization.Calendar(document.getElementById('chart_div'));
    google.visualization.events.addListener(chart, 'select', function () {
      var selection = chart.getSelection();

      // Verify the selection length
      if (selection.length > 0) {
        console.log(selection[0].date);
      } else {
        console.log('selection removed');
      }
    });
    chart.draw(dataTable);
  },
  packages:["calendar"]
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Answer 6

Be cautious when directly accessing the first element of an array while listening for the 'select' event.

chart.getSelection()[0]

The 'select' event is triggered both when a selection is made and when it is removed.

Therefore, the line above will encounter issues when the selection is removed.

Ensure to check the length before attempting to access the array.

  selection = chart.getSelection();
  // Verify the selection length
  if (selection.length > 0) {
    console.log(selection[0].date);
  } else {
    console.log('selection removed');
  }

Below is a functional snippet: select a date, then select again to remove the selection...

google.charts.load('current', {
  callback: function () {
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'date', id: 'Date' });
    dataTable.addColumn({ type: 'number', id :'Score' });
    dataTable.addRows([
      [ new Date(2016, 3, 13), 101 ],
      [ new Date(2016, 3, 14), 102 ],
      [ new Date(2016, 3, 15), 103 ],
      [ new Date(2016, 3, 16), 104 ],
      [ new Date(2016, 3, 17), 105 ]
    ]);

    var chart = new google.visualization.Calendar(document.getElementById('chart_div'));
    google.visualization.events.addListener(chart, 'select', function () {
      var selection = chart.getSelection();

      // Verify the selection length
      if (selection.length > 0) {
        console.log(selection[0].date);
      } else {
        console.log('selection removed');
      }
    });
    chart.draw(dataTable);
  },
  packages:["calendar"]
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Answer 7

Answer №4

There's a single object in this array of objects, I believe. To access its date property, use console.log(obj[0].date); instead!

Answer 8

There's a single object in this array of objects, I believe. To access its date property, use console.log(obj[0].date); instead!

Looking to retrieve information stored in a JSON stringified object

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Sharing socket data between different namespaces in Socket.ioSocket.io enables the

Reading a JSON file stored within the project directory on iPhone PhoneGap using JavaScript

What is the best approach for implementing form validation that is driven by directives in AngularJS?

Check if the provided user email is already in use using the express validator

Listener for clicking on a marker in Google Maps

Steps to deactivate two choices in a multi-select dropdown menu and visually dim those options

How to extract data from a JSON file in Java without relying on org.json library

I am encountering an issue where I am unable to send a HashMap String to a PHP server, and I am not receiving a JSONArray in the

Loading information from JSON document using AJAX

Uh-oh! The module "side-channel" cannot be found. An error occurred in the loader with code 936 when trying to run the command "npm start"

VUE JS - My methods are triggering without any explicit invocation from my side

Displaying a MySQL blob image in an HTML file with Vue.js: A step-by-step guide

Learning how to extract subarray values from JSON in Android is determined by the specific item chosen

What could be causing my ul list to not be populated by ajax?

Having trouble with jQuery show/hide not functioning properly?

Fresh Redux shop in stealth mode

clear JavaScript array of elements

Aggregate the data entered into input fields on one page and display them on a separate page

avoid inserting into a specific field with a specific name

Oops! Looks like node.js is throwing an error with the message "connect ECONNREFUSED"