-1

I have a JSON file which contains a multi-dimension array of information. I would like to use it to populate a web page, but I don't want to manually amend the content of the file. I can't include a snippet of the file, due to the contents, but it looks like:

{"something":{"value1":0,"value2":0,"value3":10000,"value4":"*"}}

I can use the data if the file is formatted like:

var data = [{"something":{"value1":0,"value2":0,"value3":10000,"value4":"*"}}]

but as stated I don't want to manually add the declaration of "data" (and the squared brackets).

How can I do this within my html page? Do I need to find a way to prepend and append, saving in a new file, or is there some other way?

Help is appreciated.

Elias Soares
  • 9,884
  • 4
  • 29
  • 59
Steve_G
  • 3
  • 4
  • You could read the file as text/string using JS and then append/prepend your square brackets to that. And then use JSON.parse( json_string ); to turn it into a JSON object. – ShanieMoonlight May 12 '21 at 13:55
  • @ShanieMoonlight can I do that without the use of a server? the file will be in the same folder, and I don't seem to be able to see a way without a server (XMLHTTP request). – Steve_G May 12 '21 at 14:07
  • Some answers here : https://stackoverflow.com/questions/14446447/how-to-read-a-local-text-file – ShanieMoonlight May 12 '21 at 14:22
  • That page has had 1.4m views - I think that I'm half of them! Every option that I've tried on that page gives me the "CORS" error. Are there any other ways that you could suggest? – Steve_G May 12 '21 at 15:13
  • Is the file on the server or on the users PC? – ShanieMoonlight May 12 '21 at 16:03
  • it will be in the same folder on a local pc - this is just a simple web page build to create an easier view of the data, to be used only by the owner of the pc, so not held on separate server – Steve_G May 13 '21 at 07:13

1 Answers1

0

Here's a way to read a file from the users PC using based on this: SO Answer

HTML:

  <input type='file' accept='text/plain' onchange='openFile(event)'>

JS:

var openFile = function(event) {

  var input = event.target
  var reader = new FileReader()

  reader.onload = function(e) {

    const jsonTxt = e.target.result.toString()
    const jsonTxtArray = '[' + jsonTxt + ']'
    console.log('obj', JSON.parse(jsonTxtArray))

  }

  reader.readAsText(input.files[0]);

}

Here's a working example: fiddle

ShanieMoonlight
  • 1,623
  • 3
  • 17
  • 28
  • `.toString()` is unnecessary,. Why wrap it brackets when just can use `[JSON.parse(text)]`? and why use the FileReader at all when you can as well just do: `[await new Response(file).json()]` – Endless May 12 '21 at 22:35
  • would there be a way to do it when the page loads - so automate it for a set file name - so for example, the file to use will always be called "thisfile.txt" - or something like that? That way, when the text file is updated, they could just refresh the web page and it will use the latest version of the file. – Steve_G May 13 '21 at 07:38
  • @Endless Can you post your answer. I haven't used `Response(file)`. I'd like to see a better solution. ToString is probably unnecessary, I was just being cautious – ShanieMoonlight May 13 '21 at 14:02
  • @ShanieMoonlight I'm not sure this or my my answer would be the correct answer... but here is a jsfiddle that would pretty much do the same thing that you are doing: https://jsfiddle.net/1n3f7pmx/ – Endless May 13 '21 at 15:40
  • @Endless I like it! – ShanieMoonlight May 13 '21 at 16:18
  • @Steve_G I'm not sure how to do that – ShanieMoonlight May 13 '21 at 17:43