How to live update JSON array from Onedrive excel file?

Question

I am currently working on a project that aims to update a webpage based on data entered in a onedrive excel file. Currently I am running a React project locally on my PC that converts a CSV file to JSON, the CSV file is stored on the public folder in the React project and does not live update.

I attempted to create a power automate flow that converted the excel file to CSV and stored it locally on my desktop (meaning it would live update), however, power automate flows cannot store files locally. So instead, the flow converts the excel file to a csv every minute, but stores it on my onedrive. I am sure most of you know, I am unable to reference this excel file from my React project because it is outside of the src folder.

For clarity here is my App.js code and the CSV I am converting:

import React from "react";
import Papa from "papaparse";
import "C:/Users/isaacl5/ReactProjects/my-app/src/App.css";

export default function App() {
 const [rows, setRows] = React.useState([]);

 React.useEffect(() => {
   async function getData() {
     const response = await fetch("/output.csv");
     console.log(response);
     const reader = response.body.getReader();
     const result = await reader.read(); // raw array
     const decoder = new TextDecoder("utf-8");
     const csv = decoder.decode(result.value); // the csv text
     console.log(csv);
     const results = Papa.parse(csv, { header: true }); // object with { data, errors, meta }
     const rows = results.data; // array of objects
     setRows(rows);
   }
   getData();
 }, []); // [] means just do this once, after initial render
 return (
   <div>
     {rows.map((row) => {
       return (
         <div key={row.id} class={row.location}>
           <h2>{row.location}</h2>
         </div>
       );
     })}
   </div>
 );
}

It is worth noting that this issue would be resolved if I could somehow fetch the CSV file on my onedrive. For example

const response = await fetch("LINK TO CSV FILE ON ONEDRIVE || OR FILE PATH TO MY ONEDRIVE DESKTOP");

CSV (Converted from excel to CSV via Power Automate):

Project,Location,StartDayandHour,EndDayandHour,UtilityA,UtilityB,UtilityC
Air Compressor,Compressor room 2,45140,45140.3333333333,Y,N,N
LGV Aisle,LGV lane,45140.25,45143.7083333333,N,Y,N

Does the microsoft graph toolkit have the capability for me to directly pull excel or CSV data into my webpage and convert it to a JSON object?

If not, is there a way I could perhaps download the CSV file locally and reference it in my code? (would this still have live updating capability?)

I understand this is an open ended questions, but any direction (specific or broad) would be appreciated. I am new to this tool-kit and am sure I am overlooking some useful functionality it has.

Any help would be appreciated! Thankyou all!

score 0 · Answer 1 · answered Jul 28 '23 at 21:28

Short answer: no.

Longer answer: You can use the @microsoft/microsoft-graph-client to load the file from your OneDrive location assuming that the authenticated user has permissions to the file. If you're using the toolkit for auth and other things then you can get the client object from the Provivers.globalProvider.client static. Once you have that and an auth session then look at this article to workout how to download the file:https://learn.microsoft.com/en-us/graph/api/driveitem-get-content?view=graph-rest-1.0&tabs=http#downloading-files-in-javascript-apps

How to live update JSON array from Onedrive excel file?

1 Answers1