如何在单击按钮时将 json 文件名传递给 javascript 函数？

Question

I have a Javascript file that returns some HTML Content based on the content of a json file.我有一个 Javascript 文件，它根据 json 文件的内容返回一些 HTML 内容。 In other words, in my file called "Resources" I have multiple json files and a single HTML File that contains multiple buttons.换句话说，在名为“Resources”的文件中，我有多个 json 文件和一个包含多个按钮的 HTML 文件。 It can be more clear with an example, here is the HTML file:举个例子会更清楚，这里是 HTML 文件：

<!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 :这是 first.json ：

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

Here is second.json :这是 second.json ：

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

Finally, here is menu_card.js :最后，这里是 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 = ... ).无论如何，由于我的项目有多个 json 文件用于不同的“类别”，并且有一个 javascript 文件“menu_card.js”必须根据 json 内容输出一些 HTML 内容，问题是我已经有很多 json 文件并且它们都有相同的对象名称，我不打算为每个文件（ 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()?是否可以将 json 文件名从 HTML 内的 href 传递给将它用于 JSON.parse() 的 javascript 函数？ 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!先感谢您！

Answer 1

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但文件必须是纯 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.依此类推……所以所有内容都将在 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>

如何在单击按钮时将 json 文件名传递给 javascript 函数？

问题描述

1 个解决方案

解决方案1
2 已采纳 2020-11-01 21:21:48

如何在单击按钮时将 json 文件名传递给 javascript 函数？

问题描述

1 个解决方案

解决方案1 2 已采纳 2020-11-01 21:21:48

解决方案1
2 已采纳 2020-11-01 21:21:48