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
19 Answers
+ 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);
}());
+ 3
You can read this to understand better
https://stackoverflow.com/questions/23344776/how-to-access-data-of-uploaded-json-file
+ 3
Create the page but set it's display to none.
Then add the window element.style.display="block" in the onChange function
+ 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>
`);
+ 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 ]
+ 2
Wow that's great
+ 1
Change the "data.json" to the json file path and try again
0
Chigozie Anyaeji 🇳🇬 no it is not
0
How you will give data.json?
That file will be only uploaded by the user. So that the file has different name.
0
Create the json file first
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.
0
Chigozie Anyaeji 🇳🇬
Please note I am using input (type="file" ) tag to get the json file!
0
Chigozie Anyaeji 🇳🇬
Yeah. This is what I am expected! Thanks a lot. But want to open this in new window friend!
- 1
Do you want to get the data from the above json file or from input?
- 1
Chigozie Anyaeji 🇳🇬 I want to get the json file from the input tag. But the format is above json file.
- 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()
}
- 1
T
- 1
T
Often have questions like this?
Learn more efficiently, for free:
Hot today
Someone can help me
2 Votes
What's wrong with this?
2 Votes
HTML community, HELP!!
2 Votes
X velocity
0 Votes
Files not linking in C++
0 Votes
I am a super beginner
0 Votes
Web Dev
0 Votes
Pls give me an idea
1 Votes