How to create your own JSON file locally?

How to create your own JSON file locally?
0

#1

I was watching a YT video explaining JSON/AJAX (link to video) and in the video, the speaker uses a github.io website to link to their own JSON file (link to file). Is it possible to create your own JSON file? I’m asking with the random quote generator in mind. Instead of using an API I find off Google, I was wondering if it’s possible to just create my own.


#2

CMIIW

Yes, JSON consist of object, array, pair, element, value, etc just like your example.
You can make your own JSON file. For random quote generator, I imagine something like this :

[
  {
    "quote": "quote1",
    "author" : "aut1",
  },
  {
    "quote": "quote2",
    "author" : "aut2",
  }
]

#3

right - i guess my question is how i would i retrieve it?


#4

As long as the json file can be accessed via a url (i.e. a github page), then you should be able to use same steps in the video (starting at 8:33) to access this url and do something with the json data.


#5

randelldawson made a good answer
I’m curious why would you want to make your own JSON ? If you don’t want to use API, you can make your own object in your own javascript


#6

This may be an old thread, but the reason I would want to make my own is to understand it better. I’m having a hard time conceptualizing exactly what purpose JSON serves on the web and how you go from JSON values to printed values on the web document. I understand arrays and objects, but I don’t know how to display that on the web in the form of a JSON file accessible through a “.js” link.

The way I learn is by gathering as much tangentially related data as is prudent to give myself a deeper understanding of the concepts. Telling me 1 * 1 = 1 is just how math works and having me memorize multiplication tables just won’t work for me, and it’s because of this reason that I struggled so much in math class.

If you know of any resource that could explain how to create a JSON document accessible by a link, preferably able to be made in Codepen it would be greatly appreciated.


#7

Nevermind. I had been away from JavaScript and Codepen for a while and got rusty. If you are confused by what I was asking, because I worded it weirdly, and for anyone with the same question as me that may stuck on the same type of problem I was, I wanted to create a pen on Codepen that only contained the JSON data that I wanted to parse from another pen. I remembered that I could simply take my pen url and add .js to it to accomplish this.

i.e.

https://codepen.ending/ProfilePageName/penPage/randomCharacters
becomes
https://codepen.ending/ProfilePageName/penPage/randomCharacters.js

Thanks anyway though, as I’m sure I would have received help.


#8

I don’t think it’s possible to serve JSON files from a codepend pen, but you can serve them from elsewhere.

Simplest way is locally:

  • Save the requisite files (index.html, index.js, quotes.json) in your chosen directory
  • Add the usual HTML boilerplate plus <script src="index.js"> to index.html
  • Add {"hello": "world"} to quotes.json
  • Add
    fetch('quotes.json')
    .then(data => data.json())
    .then(json => console.log(json));
    
    to index.js
  • Install Node.js (NPM comes bundled with it)
  • From command prompt, cd to the directory you chose for your project
  • Run npm install http-server -g
  • Run http-server -o to serve index.html and open it in your browser
  • Check the browser console. If everything’s set up correctly, you should see {hello: "world"} displayed there.

However, this will only work with static JSON files. To get a true API that responds differently to different requests, responds with a single random quote, etc. you need to set up a proper backend. However, this isn’t required for the quote machine challenge, and you can approximate similar behavior by sending a JSON file containing many quotes and selecting one at random on the front end.


#9

Actually I was able to use Codepen to “host” JSON by:

#1) Creating a new pen and putting the following in the JS module:

[
    {
        "quoteText": "Quote # 1 text goes here",
        "author": "Author #1"
    },
    {
        "quoteText": "Quote # 2 text goes here",
        "author": "Author #2"
    },
    {
        "quoteText": "Quote # 3 text goes here",
        "author": "Author #3"
    }
]

#2) Creating a file locally or on Codepen or JSFidle and using the following:

<!DOCTYPE html>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
  $.getJSON("https://codepen.io/myUserName/pen/codePenId.js", function(data) {
    console.log(data); // displays 'Quote # 2 text goes here'
  });
});
</script>
</body>
</html>

Above myUserName refers to my Codepen account username and codePenId is just the unique 6 digit pen name automatically assigned to my pen.


#10

Interesting. I guess the file extension makes no difference as long as the syntax is correct, the file is plaintext, and your code processes it as JSON.


#11

Hm, the way I do it is that use Node.js and make a JSON file in a project. Then make a main.js file and put this in there:

const app = require("express")();
app.listen(3000);
app.on("/json", (req, res) => {
  res.sendFile("./filename.json");
});

Then, input these in a command prompt:

1. npm init
(then put in the values)

2. npm i express

3. node server.js

And that should let you access the file from anywhere on the web while your computer is running. Just go to https://[youripaddress]:3000/json