How to pass json file name to javascript function on button click?

Question

I have a Javascript file that returns some HTML Content based on the content of a json file. In other words, in my file called "Resources" I have multiple json files and a single HTML File that contains multiple buttons. It can be more clear with an example, here is the HTML file:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <div class="cards">
        <div class="card">
            <img src="first.jpg" class="card_image">
            <a href="javascript:showMenu()" class="animated-button"> <!--showMenu() is inside menu-card.js-->
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <p>FIRST BUTTON</p>
            </a>
        </div>
    <div class="card">
            <img src="second.jpg" class="card_image">
            <a href="javascript:showMenu()" class="animated-button"> <!--showMenu() is inside menu-card.js-->
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <p>SECOND BUTTON</p>
            </a>
        </div>
  </div>
  <script type="text/javascript" src="first.json"></script>
  <script type="text/javascript" src="second.json"></script>
  <script type="text/javascript" src="menu_card.js"></script>
</body>
</html>

Here is first.json :

products =
`[
    {
        "name": "Shoes",
        "description": "This are some shoes.",
        "price": "180"
    }
]`;

Here is second.json :

products =
`[
    {
        "name": "Hoodies",
        "description": "This are some hoodies.",
        "price": "90"
    }
]`;

Finally, here is menu_card.js :

var storedMenu = JSON.parse(products);
//Some other stuff using storedMenu

Anyways, since I have multiple json files for different "categories" for my project and a SINGLE javascript file "menu_card.js" that must output some HTML content based on the json content, the problem is that I already have a lot of json files and they all have the same object name and I don't plan on changing it for every single file ( products = ... ). Is it possible to maybe pass the json file name from the href inside the HTML to the javascript function that will use it for the JSON.parse()? I think I was clear enough with my issue, if something is unclear or not specified, I can easily edit the post. Thank you in advance!

Your JSON files aren't actually JSON files. They're JS scripts. Can you change them to simple assignments like products = [...]? If so you could make each products = (products || []).concat(theNewObject) — user2740650
– user2740650, Commented Nov 1, 2020 at 21:19
@user2740650 You might be right but the thing is that I'm not an expert at all...I'm just a beginner for now in the Web Development field so I don't have any idea for now how to implement what you just said...thanks anyway for taking the time and actually giving a hand. — Jasper Howard
– Jasper Howard, Commented Nov 1, 2020 at 21:22

farvilain · Accepted Answer · 2020-11-01 21:21:48Z

2

Well you can change the script import like that

  <script type="text/javascript" src="first.json">
    fetch('/first.json')
   .then(response => response.json())
   .then( json => {
      window.products = (window.products || []);
      json.forEach( p => window.products.push(p) );
   });
  </script>

But files must be pure JSON

[
    {
        "name": "Hoodies",
        "description": "This are some hoodies.",
        "price": "90"
    }
]

Rewrite them programmaticaly.

You could also rewrite then like below but it will change all the solution.

{
        "name": "Hoodies",
        "description": "This are some hoodies.",
        "price": "90"
}

And so on... so everything will be available in window.products.

As it can be long to rewrite, you can do it for every file with something like

  <script type="text/javascript" src="first.json">
    Promise.all([ '/first.json', '/second.json']
       .map( file => fetch(file).then( r => r.json() ) )
    )
   .then( allProducts => allProducts.flat() )
   .then( allProducts => window.products = allProducts)
    ;
   });
  </script>

answered Nov 1, 2020 at 21:21

farvilain

2,5622 gold badges15 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

farvilain Over a year ago

Yeah I know I ask for some change but I've tried to make them minimal. Using an API could be a better solution, for sure

Jasper Howard Over a year ago

I don't have any doubts about our solution, it might the best, but I'm not an expert at all when it comes to Web Development, I'm just in the begginer phases and so I don't have any ideas on how to actually implement the solution you provided, like literally how to use it and how to access different json files based on which button was clicked...If you want to give some more tips it would be great, if not, no problem since you already provided a solution, it's just me with my little experience and it doesn't depend on you. I'm going to have to look more into it, thanks a lot!

farvilain Over a year ago

My best advice is do not spend to many time trying to create something by yourself. There is lot of resources, lot of tutorials, learn how to do 'like the others', because their solutions survived lots of common problem. Just reproduce... later you'll be good enough to innovate. Don't waste your time creating a squared wheel.

Jasper Howard Over a year ago

Thanks for the advice, this is exactly what I'm going to do.

Collectives™ on Stack Overflow

How to pass json file name to javascript function on button click?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related