Retrieving a time series data set from a JSON stream

Question

Retrieving a time series data set from a JSON stream

Even though ThingSpeak offers great charts, I'm interested in retrieving data from ThingSpeak and creating my own visualizations using Google Charts. When extracting a "feed" from ThingSpeak, the data is presented in a JSON object like the one below:

{
  "channel":
  {
     "id": 9,
     "name": "my_house",
     "description": "Netduino Plus connected to sensors around the house",
     "latitude": "40.44",
     "longitude": "-79.996",
     "field1": "Light",
     "field2": "Outside Temperature",
     "created_at": "2010-12-13T20:20:06-05:00",
     "updated_at": "2014-02-26T12:43:04-05:00",
     "last_entry_id": 6060625
  },
  "feeds":
       [
          {
            "created_at": "2014-02-26T12:42:49-05:00",
            "entry_id": 6060624,
            "field1": "188",
            "field2": "25.902335456475583"
          },
          {
            "created_at": "2014-02-26T12:43:04-05:00",
            "entry_id": 6060625,
            "field1": "164",
            "field2": "25.222929936305732"
          }
      ]
  }

I've been trying to find a way to extract the "created_at" and "field1" (and maybe "field2") data into a table or array format, but I haven't found a solution yet. This is the kind of output I want to achieve:

[
['created_at',                'field1', 'field2'],
['2014-02-26T12:42:49-05:00', 188,      25.902335456475583],
['2014-02-26T12:43:04-05:00', 164,      25.222929936305732]
]

Any suggestions on how I can accomplish this task?

javascript arrays json

Answer 1

Answer №1

My approach to solving this problem is as follows. (Please note that I referred to code from the following source to understand how to access object properties dynamically: How to iterate through property names of Javascript object?)

var data = {
  "channel":
  {
     "id": 9,
     "name": "my_house",
     "description": "Netduino Plus connected to sensors around the house",
     "latitude": "40.44",
     "longitude": "-79.996",
     "field1": "Light",
     "field2": "Outside Temperature",
     "created_at": "2010-12-13T20:20:06-05:00",
     "updated_at": "2014-02-26T12:43:04-05:00",
     "last_entry_id": 6060625
  },
  "feeds":
       [
          {
            "created_at": "2014-02-26T12:42:49-05:00",
            "entry_id": 6060624,
            "field1": "188",
            "field2": "25.902335456475583"
          },
          {
            "created_at": "2014-02-26T12:43:04-05:00",
            "entry_id": 6060625,
            "field1": "164",
            "field2": "25.222929936305732"
          }
      ]
  }

var results = [];
var feeds = data.feeds;

var headers = [];
for (var key in feeds[0]) {
    headers.push(key);
}
results.push(headers);

for (var x = 0; x < feeds.length; x++) {
    var row = [];
    var feed = feeds[x];
    for (var y = 0; y < headers.length; y++) {
        var header = headers[y];
        row.push(feed[header]);
    }
    results.push(row);
}

console.log(results);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

My approach to solving this problem is as follows. (Please note that I referred to code from the following source to understand how to access object properties dynamically: How to iterate through property names of Javascript object?)

var data = {
  "channel":
  {
     "id": 9,
     "name": "my_house",
     "description": "Netduino Plus connected to sensors around the house",
     "latitude": "40.44",
     "longitude": "-79.996",
     "field1": "Light",
     "field2": "Outside Temperature",
     "created_at": "2010-12-13T20:20:06-05:00",
     "updated_at": "2014-02-26T12:43:04-05:00",
     "last_entry_id": 6060625
  },
  "feeds":
       [
          {
            "created_at": "2014-02-26T12:42:49-05:00",
            "entry_id": 6060624,
            "field1": "188",
            "field2": "25.902335456475583"
          },
          {
            "created_at": "2014-02-26T12:43:04-05:00",
            "entry_id": 6060625,
            "field1": "164",
            "field2": "25.222929936305732"
          }
      ]
  }

var results = [];
var feeds = data.feeds;

var headers = [];
for (var key in feeds[0]) {
    headers.push(key);
}
results.push(headers);

for (var x = 0; x < feeds.length; x++) {
    var row = [];
    var feed = feeds[x];
    for (var y = 0; y < headers.length; y++) {
        var header = headers[y];
        row.push(feed[header]);
    }
    results.push(row);
}

console.log(results);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Retrieving a time series data set from a JSON stream

Answer №1

Similar questions

Using Bloodhound with a JSON generated using Flask's jsonify function is a seamless process

Utilizing a Meteor Method within a Promise Handler [Halting without Throwing an Error]

Implementing Asynchronous Custom Validators in Angular 4

Navigate to the appropriate Angular route using HTML5 mode in Rails

Configure environment variables for either grunt or grunt-exec

I am facing an issue with my useFetch hook causing excessive re-renders

The API request for /api/auth/callback/credentials was resolved successfully, but no response was sent back. This could potentially lead to delays

Mapping a bar chart on a global scale

Display only the labels of percentages that exceed 5% on the pie chart using Chart JS

When sending a JSON string in an HTTP request with Express, the req.body variable may be empty

Rapidly update code changes using the development mode in Next.js with the VS Code Remote Container/devcontainer

Creating clickable data columns in jQuery DataTablesWould you like to turn a column in your

Preventing autoscrolling in Ionic's dual side menu template when additional content is added

Create an Angular directive that highlights a div if any of its child inputs have focus

Is it more advantageous to create two distinct projects for the frontend and backend along with an API, or should I consolidate them into a

Loop through the .getJSON response using jQuery

Turn off sticky sidebar feature for mobile-friendly layout

Is it possible to make API calls within the componentWillMount lifecycle method in React?

Conceal a secret input element's value upon clicking a submit button (using PHP and jQuery)

Unexpected JSON response generated by my PHP script following an AJAX request