如何将项目从用户的 JSON 文件导入到 HTML 并将每个值设置为变量

Question

我正在用 JS 制作一个网站，CSS & HTML（没有服务器端脚本）。

我需要从 JSON 文件中导入用户数据（以下是其格式）：

{
  "car": "1320",
  "ship": "1400",
  "plane": "1520",
  "helicopter": "1440",
  "plots": "1,2,3,4",
  "auctionplots": "",
  "carowns": "1",
  "planeowns": "4",
  "helicopterowns": "2",
  "shipowns": "3",
  "addlist": "10,10,20,20,20,30,30,30,40,40,40,50,50,50,60,60,60,70,70,70,80,100",
  "sublist": "10,10,20,22,40,40,40,60,70,70,90,90,90,110,120,120,140,140,140,160,180,200",
  "history": "Server Started,car ~ Bought Plot 1 -60,Plot 1 ~ Rent Updated to 70,helicopter ~ Bought Plot 2 -60,Plot 2 ~ Rent Updated to 70,ship ~ Bought Plot 3 -100,Plot 3 ~ Rent Updated to 120,plane ~ Bought Plot 4 -100,Plot 4 ~ Rent Updated to 120,Plot 4 ~ Rent Updated to 220,car ~ Payed rent (0) for Plot 4 to plane",
  "session_id": "09042021"
}

这是导入页面Monopoly Online

当我点击导入数据时，每个对象都应该在一个变量中，
例如： "car": "1500" ，它的值 (1500) 应该在变量 car 中。
那可能吗？或者还有什么我可以做的来实现这个目标吗？

Answer 1

我已经帮你解决了。它解析你放入文本字段的整个 JSON 并将其放入对象中，这样你就可以用它做任何你想做的事。请看一下函数 parse

 function show(id) {
  document.getElementById(id).style.visibility = 'visible'
 }
 function hide(id) {
  document.getElementById(id).style.visibility = 'hidden'
}

function parse(idTag) {
  const input = $(idTag).val();
  const object = JSON.parse(input);
  for (const [key, value] of Object.entries(object)) {
    $('#parsed').append(`<p>${key}: ${value}</p><br>`);
  }
  show('parsed')
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />

        <!-- Bootstrap CSS -->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.css" />
        <link sizes="16x16 24x24 32x32 48x48 64x64" rel="shortcut icon" type="image/png" href="https://monopoly.hasbro.com/images/worldwide_header_hasbro_logo.png" />
        <title>Import Module</title>
        <style>
            textarea#import {
                display:block;
                width: 40pc;
                height: 30pc;
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
        <div id="main" class="mt-5 centre container-sm contact-form">
                <fieldset>
                    <button onclick="show('results');hide('me');hide('hr');" id="me" class="btn btn-outline-dark">Insert Data&nbsp;&nbsp;<i class="fas fa-save"></i></button>

                    <hr id="hr"/>
                    <div class="results" id="results" style="visibility: hidden;">
                        <h2>Import Data</h2>
                        <hr />
                        <textarea placeholder="Paste Your JSON File Here" id="import"></textarea>
                        <button onclick="parse('#import')" class="mt-1 btn btn-outline-dark">Import Data&nbsp;&nbsp;<i class="fas fa-save"></i></button>
                    </div>
                    
                </fieldset>
        </div>
        
        <div id="parsed">
        </div>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    </body>
</html>

如何将项目从用户的 JSON 文件导入到 HTML 并将每个值设置为变量

How to import items from user's JSON File to HTML and set each value as variable

javascript

import

json

javascript-objects