radios.json

[IdkWhosThis]

I want to edit radios.. If I will change infos in radios.json and change location in populateDOM.js, it will still load old radios.json. I found second call in mains.js, but If i will change it to my radios.json location, website will be blank.. so.. any ideas, how to fix it?

[libekonst]

Hey,

The main.js file is a file generated by Webpack, a bundler that takes the code we feed it, minifies it and outputs it into a single file that we can link to our index.html. This improves performance and allows us to split our code into multiple files.

You don't want to edit main.js directly, instead you should tell webpack to read all .js files and generate a fresh main.js.

• To do that, first make sure you have installed the dependencies required to build the app. Open the terminal in the project folder and type npm install.
  A node_module folder will be created. We don't upload this folder on github and instead describe our dependencies in package.json under dependencies and devDependencies, and let others download them using the npm install command.
• Now that webpack is downloaded, type npm run dev in the command line and it will start watching for file changes to update main.js.

---

That being said, if you plan to keep the radio sources in your source code, there is no particular reason to have them in a JSON file, request them every time and have to update the requestURL. I initially did it for the sake of messing around with http requests.
By its nature, JSON is a valid JavaScript object so you can simply rename radios.json to radios.js and export it as a regular object, like so:

//radios.js

export default {  // <- Export the object.
    // Leave everything else as is.
    "music": [ 
    // ...
}

Then, import it in populateDOM.js, get rid of all the requestJSON() nastiness and simply call renderRadios() passing in the imported object, like so:

//populateDOM.js

import radios from '../radios.js';  // <- Import the radios.

export function requestJSON(){
    renderRadios(radios);  // <- Add this.
    // Delete everything else.
}

function renderRadios(radioData) {  //<- Rename the parameter to 'radioData'.
    const radioData = request.response;  // <- Delete this line.

    // Leave the rest as is.
    setFirstRadio(radioData);

    // ...
}

There is a lot of refactoring and cleanup that can be done, feel free to mess around. 😄
I plan to rewrite the app from scratch using react when I get the time.