Convert a JSON file to an array in javascript to visualize the data in ChartsJS

Question

I have a JSON file with a lot of temperatur data meassured every quarter hour and saved into a object in the file.

{"Temp_12:0": "26",
"Temp_12:15": "20",
"Temp_12:30": "25",
"Temp_12:45": "25",
"Temp_13:0": "26",
"Temp_13:15": "25",
"Temp_13:30": "26",
"Temp_13:45": "26"}

This is how the data is structurised in the file. I want to display the display the data on a webserver in my local network with ChartsJS. The Problem is that I don't have an idea of how to parse the data so that I can display it.

I want the array to look somthing like this: [26,20,25...]

And also I want to import the JSON Object from another file on my server because it is a dataset that is constantly changing so I can not locate the data in the html file.

I would be hapy if anyone here can help me with my problem because I'am relatively new to JavaScript.

Hi, welcome to stackoverflow. Please note that you must provide some kind of tries you made before posting. However, when you say "1D array", which value you wanna put in in ? you are not very clear at all in your question. try to look at `Object.values`method — Maxime Girou, Jul 27 '21 at 14:06
Doest this question help?https://stackoverflow.com/q/38824349/14032355 — ikhvjs, Jul 27 '21 at 14:10

score 0 · Answer 1 · answered Jul 27 '21 at 14:09

If your goal is to have an array like ["26", "20"...]:

Object.values({"Temp_12:0": "26",
"Temp_12:15": "20",
"Temp_12:30": "25",
"Temp_12:45": "25",
"Temp_13:0": "26",
"Temp_13:15": "25",
"Temp_13:30": "26",
"Temp_13:45": "26"})

If you want the float values of the strings:

Object.values({"Temp_12:0": "26",
"Temp_12:15": "20",
"Temp_12:30": "25",
"Temp_12:45": "25",
"Temp_13:0": "26",
"Temp_13:15": "25",
"Temp_13:30": "26",
"Temp_13:45": "26"}).map(i => parseFloat(i))

score 0 · Accepted Answer · answered Jul 27 '21 at 14:41

You can interpret the data by parsing each value and determining the time (hour/minute) and the value of the temperature for the recorded quarter of an hour.

Here are some things to review:

const rawData = {
  "Temp_12:0"  : "26",
  "Temp_12:15" : "20",
  "Temp_12:30" : "25",
  "Temp_12:45" : "25",
  "Temp_13:0"  : "26",
  "Temp_13:15" : "25",
  "Temp_13:30" : "26",
  "Temp_13:45" : "26"
};

const converted = Object.entries(rawData).map(([key, value]) => {
  const [match, hour, minute] = key.match(/^Temp_(\d+):(\d+)$/);
  const date = new Date();
  date.setUTCHours(+hour);
  date.setUTCMinutes(+minute);
  date.setUTCSeconds(0);
  date.setUTCMilliseconds(0);
  return {
    x: date,
    y: +value
  };
});

const data = {
  labels: converted.map(({ x }) => x.toLocaleTimeString('en-US', {
    hour: '2-digit',
    minute: '2-digit',
    timeZone: 'UTC',
    hour12: false
  })),
  datasets: [{
    label: 'Building #1',
    backgroundColor: 'rgb(255, 99, 132, 0.75)',
    borderColor: 'rgb(255, 99, 132)',
    data: converted.map(({ y }) => y),
  }]
};

const config = {
  type: 'line',
  data,
  options: {
    scales: {
      x: {
        title: {
          display: true,
          text: 'Time of Day'
        }
      },
      y: {
        title: {
          display: true,
          text: 'Temperature (°C)'
        }
      },
    },
    plugins: {
      title: {
        text: 'Temperature Tracking',
        display: true
      },
      legend: {
        position: 'right'
      }
    }
  }
};

var myChart = new Chart(document.getElementById('myChart'), config);

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.0/chart.min.js"></script>
<div>
  <canvas id="myChart"></canvas>
</div>

Convert a JSON file to an array in javascript to visualize the data in ChartsJS

2 Answers2