0

[SOLVED] How to accept json file in input tag , fetch data from it and how to display the data in the another new page?

I only expect to do this only with Javascript. (Not jquery, ajax, any other..) Please, say how to do this? HTML code for get the JSON file: https://code.sololearn.com/WA4a6Rlf05Vd/?ref=app Json file format: { "User info": { "name":"Mohan", "Interest":"C,HTML,GO" } } And, This data will display like this, https://code.sololearn.com/W0Gmbeont2iw/?ref=app

12th Mar 2022, 8:01 AM
˜”*°•.˜”*°• Mohan 333 •°*”˜.•°*”˜
˜”*°•.˜”*°• Mohan 333 •°*”˜.•°*”˜ - avatar
19 odpowiedzi
+ 3
Try this **Html** <input id="file" type="file" /> <p>Select a file with the following format.</p> <pre> { "Userinfo":{ "name": "Mohan", "interest": "C,Html,Go" } } </pre> **Js** (function(){ function onChange(event) { var reader = new FileReader(); reader.onload = onReaderLoad; reader.readAsText(event.target.files[0]); } function onReaderLoad(event){ console.log(event.target.result); var obj = JSON.parse(event.target.result); document.querySelector(".infos").innerHTML=`name:${obj.Userinfo.name}interest: ${obj.Userinfo.interest}` } document.getElementById('file').addEventListener('change', onChange); }());
12th Mar 2022, 12:19 PM
Chigozie Anyaeji 🇳🇬
Chigozie Anyaeji 🇳🇬 - avatar
12th Mar 2022, 12:21 PM
Chigozie Anyaeji 🇳🇬
Chigozie Anyaeji 🇳🇬 - avatar
+ 3
Create the page but set it's display to none. Then add the window element.style.display="block" in the onChange function
12th Mar 2022, 4:57 PM
Chigozie Anyaeji 🇳🇬
Chigozie Anyaeji 🇳🇬 - avatar
+ 3
Chigozie Anyaeji 🇳🇬 I found how to open a new window with json content! Javscript code: let newwindow=window.open("","Dynamic Popup"); newwindow.write(` <style> #out{ box-shadow:5px 0px 8px grey; border-radius:5%; height: auto; position:relative; top:100px; } .infos{ position:relative; left:25%; top:20%; font-weight:bolder; padding:2%; width:50%; box-shadow:2px 0px 5px grey; background-color:whitesmoke; } g{ background-color:lightgreen; color:red; } </style> <body> <div id="out"> <br/> <div class="infos"> <g>Name</g> : ${obj.Userinfo.name} </div> <br/> <div class="infos"> <g>Interest</g> : ${obj.Userinfo.interests} </div> <br/> </div> </body> `);
13th Mar 2022, 3:48 AM
˜”*°•.˜”*°• Mohan 333 •°*”˜.•°*”˜
˜”*°•.˜”*°• Mohan 333 •°*”˜.•°*”˜ - avatar
+ 3
1. You can try 'accept' attribute to accept json file accept="application/JSON" Note : it can overridden by users [ Accept attributes - https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept ] 2. To get data U can use 'FileReader' [ FileReader - https://developer.mozilla.org/en-US/docs/Web/API/FileReader ]
13th Mar 2022, 8:18 PM
Pariket Thakur
Pariket Thakur - avatar
+ 2
Wow that's great
13th Mar 2022, 6:15 AM
Chigozie Anyaeji 🇳🇬
Chigozie Anyaeji 🇳🇬 - avatar
+ 1
Change the "data.json" to the json file path and try again
12th Mar 2022, 10:51 AM
Chigozie Anyaeji 🇳🇬
Chigozie Anyaeji 🇳🇬 - avatar
12th Mar 2022, 8:52 AM
˜”*°•.˜”*°• Mohan 333 •°*”˜.•°*”˜
˜”*°•.˜”*°• Mohan 333 •°*”˜.•°*”˜ - avatar
0
How you will give data.json? That file will be only uploaded by the user. So that the file has different name.
12th Mar 2022, 8:54 AM
˜”*°•.˜”*°• Mohan 333 •°*”˜.•°*”˜
˜”*°•.˜”*°• Mohan 333 •°*”˜.•°*”˜ - avatar
0
Create the json file first
12th Mar 2022, 8:56 AM
Chigozie Anyaeji 🇳🇬
Chigozie Anyaeji 🇳🇬 - avatar
0
Chigozie Anyaeji 🇳🇬 I already created the HTML code(and json file contains user informations) in my pc. And the code will accept the json file I don't know how to retrieve the data from it and open a new page contains the data.
12th Mar 2022, 9:03 AM
˜”*°•.˜”*°• Mohan 333 •°*”˜.•°*”˜
˜”*°•.˜”*°• Mohan 333 •°*”˜.•°*”˜ - avatar
0
Chigozie Anyaeji 🇳🇬 Please note I am using input (type="file" ) tag to get the json file!
12th Mar 2022, 11:48 AM
˜”*°•.˜”*°• Mohan 333 •°*”˜.•°*”˜
˜”*°•.˜”*°• Mohan 333 •°*”˜.•°*”˜ - avatar
0
Chigozie Anyaeji 🇳🇬 Yeah. This is what I am expected! Thanks a lot. But want to open this in new window friend!
12th Mar 2022, 1:37 PM
˜”*°•.˜”*°• Mohan 333 •°*”˜.•°*”˜
˜”*°•.˜”*°• Mohan 333 •°*”˜.•°*”˜ - avatar
13th Mar 2022, 12:31 PM
Vijay Suthar
Vijay Suthar - avatar
- 1
Do you want to get the data from the above json file or from input?
12th Mar 2022, 8:10 AM
Chigozie Anyaeji 🇳🇬
Chigozie Anyaeji 🇳🇬 - avatar
- 1
Chigozie Anyaeji 🇳🇬 I want to get the json file from the input tag. But the format is above json file.
12th Mar 2022, 8:12 AM
˜”*°•.˜”*°• Mohan 333 •°*”˜.•°*”˜
˜”*°•.˜”*°• Mohan 333 •°*”˜.•°*”˜ - avatar
- 1
Try accessing it like this async function load() { var ud = await fetch("data.json") ud=ud.json() document.querySelectorAll(".infos")[0].innerHTML=ud.userinfo.name; } window.onload=()=>{ load() }
12th Mar 2022, 8:42 AM
Chigozie Anyaeji 🇳🇬
Chigozie Anyaeji 🇳🇬 - avatar
- 1
T
13th Mar 2022, 12:54 AM
Theron Dillehay
- 1
T
13th Mar 2022, 12:34 PM
Theron Dillehay