Add manually entered data into javascript

Question

A simple question here: I have the following subset of my data in Javascript. My application works, but I need a simple way to bring in an expanded version of that same data, but taken from an Excel file rather than manually entered into this script. What is the simplest and easiest solution to do so with few steps in between?

    const countryData={
        australia: {
        countryName: "France",
        fsnNarrative: "aus fsn lorem ipsum dolor sit amet",
        otherNarrative: "lorem ipsum dolor",
        marketLink: "http://www.google.com",
        center: [65, 34],
        zoom:4
    },
    france: {
        countryName: "France",
        fsnNarrative: "bgd fsn lorem ipsum dolor sit amet",
        otherNarrative: "lorem ipsum dolor",
        marketLink: "http://www.youtube.com",
        center: [90, 24],
        zoom: 5
    }
}

I tried to convert it in from a JSON, but had trouble also a) converting excel to JSON and b) assigning external local JSON to a constant (trying to follow this guidance but am not clear. I also use R, in case anyone has a solution with that.

Optimally, I'd be able to just link from the Javascript to an external JSON or some other file type, like this. const data = (path to some URL)

Working with just Javascript, HTML and CSS for now.

Lucas Roquilly · Accepted Answer · 2022-06-06T09:38:26.320

1

I use the SheetJS library to process and export XLS data. Please check snippet below

    var json_data;
(async() => {
  // fetch xls file
  const url = "https://www.lucasroquilly.com/stack_overflow_samples/workbook.xls";
  // store data
  const data = await (await fetch(url)).arrayBuffer();
  // convert to workbook
  const workbook = XLSX.read(data);
  //get first sheet
  const worksheet = workbook.Sheets[workbook.SheetNames[0]]
  //convert sheet to json
  json_data = XLSX.utils.sheet_to_json(worksheet);
})();

<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.5/xlsx.min.js"></script>
<button onclick="console.log(json_data)">Log json</button>

edited Jun 06 '22 at 09:38

answered Jun 06 '22 at 07:52

Lucas Roquilly

406
2
9

Thanks Lucas, Sorry for a dumb follow-up question, just to make sure I have it working. If the dataset variable is then assigned to the 'json' variable, can we only define it within those brackets? And can all the subsequent code which pulls from that only exist within those brackets? Or is there a way to then use that dataset after and outside? Thanks. – kodikai Jun 06 '22 at 09:00
1

@kodikai sure, I have edited my snippet so you can see : I have declared a global variable called `json_data` (so outside the main function of the snippet which is an async [IIFE](https://developer.mozilla.org/en-US/docs/Glossary/IIFE)) and just added the data. But you can also use that code in any kind of function. Please upvote if that was useful ;) – Lucas Roquilly Jun 06 '22 at 09:40

Add manually entered data into javascript

1 Answers1