JSON data acquisition

@JMRKERMar 09.2021

All the JSON files I have found start with a ‘{‘ (bracket) character.
I under stand that the JSON is a text file and must be converted with a JSON.parse() to be usable.

My questions are:
1 How do I store the JSON file? With and extension of .json, .js, or .txt?

2. What do I use to reference the JSON information for the conversion?
Something like jsonText = {
followed by the string information?
Example found at: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/JSON

to post a comment

JavaScript

6 Comments(s) _↴

@rpg2009Mar 09.2021 — #If you look at the mozilla link you posted, the example they give is

let requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';

> @JMRKER#1629057 All the JSON files I have found start with a '{' (bracket) character.

Again in the article, they also start with an Array '['

Basically Json is native javascript in a standardized format (property names in double quotes) that other languages can use.

JSON is a text-based data format following JavaScript object syntax, which was popularized by Douglas Crockford. Even though it closely resembles JavaScript object literal syntax, it can be used independently from JavaScript, and many programming environments feature the ability to read (parse) and generate JSON.[/quote]

Using the example from the mozilla page, we can access the properties just like any other object

``javascript<i>
 </i>const jsonData = {
 "squadName": "Super hero squad",
 "homeTown": "Metro City",
 "formed": 2016,
 "secretBase": "Super tower",
 "active": true,
 "members": [
 {
 "name": "Molecule Man",
 "age": 29,
 "secretIdentity": "Dan Jukes",
 "powers": [
 "Radiation resistance",
 "Turning tiny",
 "Radiation blast"
 ]
 },
 {
 "name": "Madame Uppercut",
 "age": 39,
 "secretIdentity": "Jane Wilson",
 "powers": [
 "Million tonne punch",
 "Damage resistance",
 "Superhuman reflexes"
 ]
 },
 {
 "name": "Eternal Flame",
 "age": 1000000,
 "secretIdentity": "Unknown",
 "powers": [
 "Immortality",
 "Heat Immunity",
 "Inferno",
 "Teleportation",
 "Interdimensional travel"
 ]
 }
 ]
 }
 
 const firstMember = jsonData.members[0]
 
 console.log(firstMember.name) // Molecule Man
 console.log(firstMember.powers) // ["Radiation resistance", "Turning tiny", "Radiation blast"]<i>
 </i>``

That's my take on it : )

@NogDogMar 09.2021 — #> @JMRKER#1629057 1 How do I store the JSON file? With and extension of .json, .js, or .txt?

I always use .json, though in general the (PHP) applications I write don't care, but it helps my editor default to the correct syntax highlighting/formatting, and makes it obvious to me what it is.

@JMRKERauthorMar 10.2021 — #Thanks to you both.

The key to my understanding was to insert the assignment

const jsonText =

BEFORE the example data starting at '{' or '['

Then since I do not have a server to load the JSON information from

I either put the information inline or

created an external file.js and called it with a script tag.

I think I could put the information into a text file with an extension other than .js

to be loaded locally (as .txt or .json, as suggested) and then JSON.parse() the

string information as needed (but I haven't tried this yet)

@rpg2009Mar 10.2021 — #@JMRKER#1629100

I think I could put the information into a text file with an extension other than .js

to be loaded locally (as .txt or .json, as suggested) and then JSON.parse() the

string information as needed (but I haven't tried this yet)

I'm not sure you will be able to do that locally without going through a localhost server. Browsers tend to prevent that.

You could perhaps make it a module

e.g. /js/jsonData.js

``<i>
 </i>export const jsonText = {
 ...data here
 } <i>
 </i>`</CODE>
 then in your script
 <CODE lang="javascript">`javascript<i>
 </i>&lt;script type='module'&gt;
 import { jsonText } from './js/jsonData.js'
 
 ... do stuff here
 &lt;/script&gt;<i>
 </i>``

Just a thought

@JMRKERauthorMar 10.2021 — #Would love to use a module but I thought the export/import

commands REQUIRED a local server (which I don't have).

Maybe just more of my ignorance or miss-understanding showing.

@rpg2009Mar 10.2021 — #> @JMRKER#1629104 Maybe just more of my ignorance or miss-understanding showing.

No, that's my ignorance showing : )

So used to using vscodes' live server extension to preview my code, that I missed that one — Blocked by CORS policy.

So as you suggested

**./js/data.js**

``javascript<i>
 </i>const data = {
 ...
 }<i>
 </i>`</CODE>
 
 <STRONG>**index.html**</STRONG>
 <CODE lang="javascript">`javascript<i>
 </i>&lt;script src='./js/data.js'&gt;&lt;/script&gt;
 &lt;script&gt;
 ... do stuff with data here
 &lt;/script&gt;<i>
 </i>``

Also in #JavaScript _↴

image array created from directory a problem with my code or Chrome???I think Java is ok. I need little help.

Success!

Help @JMRKER spread the word by sharing this article on Twitter...

Tweet This

JSON data acquisition

6 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

JSON data acquisition

6 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

6 Comments(s) _↴

Also in #JavaScript _↴