Блог

Главная - Вопросы по программированию - Как импортировать элементы из JSON-файла пользователя в HTML и установить каждое значение в качестве переменной

Как импортировать элементы из JSON-файла пользователя в HTML и установить каждое значение в качестве переменной

#javascript #json #import #javascript-objects

Вопрос:

Я создаю веб-сайт с использованием 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 ($120) for Plot 4 to plane",
  "session_id": "09042021"
}

Это страница импорта Монополия онлайн

Когда я нажимаю Импортировать данные, каждый объект должен находиться внутри переменной,
например : "car": "1500" , Его значение (1500) должно быть в переменной car .
Возможно ли это? Или есть что-то еще, что я могу сделать для достижения этой цели?

Комментарии:

1. Вы проверили метод JSON.parse ()? developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

Ответ №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 Dataamp;nbsp;amp;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 Dataamp;nbsp;amp;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>

Комментарии:

1. Я немного изменил часть сценария, переместил ее во внешний файл js и удалил div#проанализированный со страницы импорта. Теперь это Идеально, Спасибо 🙂

2. Я рад, что это помогло вам, вы можете выбрать лучший ответ и проголосовать за него. И тебе тоже спасибо :))

Метки: