Я пытаюсь загрузить данные json с локального пути на простую HTML-страницу. Я пробовал много способов загрузки данных, используя fetch, ajax. мне нужно прочитать значение из json и обновить его на html-странице.
Мне нужно разместить эту страницу, и она будет использоваться людьми с их собственными браузерами.
Json_Development_Test.js
window.addEventListener('load', function() {
console.log('All assets are loaded')
})
let request = new Request("./test.json")
fetch(request)
.then(function(resp){
return resp.json();
})
.then(function(data){
for(var i in data){
console.log(i+data[i])
document.getElementById(i).style.background = data[i]
}
})
HTML
<html>
<style type="text/css">
.tableLayout {
display:table;
}
.tableLayout > div{
display:table-row;
}
.tableLayout > div > div {
display:table-cell;
border:solid;
text-align: center;
}
.Table
{
display: table;
}
.Title
{
display: table-caption;
text-align: center;
font-weight: bold;
font-size: larger;
}
.Heading
{
display: table-row;
font-weight: bold;
text-align: center;
}
.Row
{
display: table-row;
display:grid;
}
.fixed {
table-layout: fixed;
display:grid
}
.Cell
{
display: table-cell;
border: solid;
border-width: thin;
padding-left: 26px;
padding-right: 26px;
text-align: center;
}
.Cell2
{
display: table-cell;
border: solid;
border-width: thin;
padding-left: 56px;
padding-right: 34px;
text-align: left;
}
.Cell3
{
display: table-cell;
border: solid;
border-width: thin;
padding-left: 56px;
padding-right: 35px;
text-align: center;
}
</style>
<body>
<header>
<meta http-equiv="refresh" content="30">
<h1> JSon Example </h1>
<script src ="Json_Development_Test.js">
</script>
</header>
<div class="Heading">
<div Class="Cell">
<p>Project Name</p>
</div>
<div Class="Cell">
<p>Service URL</p>
</div>
<div id="test">
<span id="headerID1" class="Cell">
<p>PDC</p>
</span>
<span id="headerID2" class="cell">
<p>DDC</p>
</span>
<span id ="Time" class="Cell">
<P> Updated Checked Time</P>
</span>
</div>
</div>
<div class="Heading">
<div Class="Cell">
<p>GRapd</p>
</div>
<div Class="Cell">
<p>abc.com</p>
</div>
<div id ="Test">
<span id="Pdata1" class="Cell2">
<p>cp</p>
</span>
<span id="Ddata1" class="Cell2">
<p>de</p>
</span>
<span id ="tdata1" class="Cell2">
<P> </P>
</span>
</div>
</div>
</div>
<div class="Heading">
<div Class="Cell">
<p>LEPRD</p>
</div>
<div Class="Cell">
<p>bcd.com</p>
</div>
<div id="test">
<span id="pdata2" class="Cell2">
<p>HTP</p>
</span>
<span id="ddata2" class="Cell2">
<p>HcP</p>
</span>
<span id ="tdata2" class="Cell2">
<P> </P>
</span>
</div>
</div>
</body>
</html>
Оба вышеупомянутых варианта работают в некоторых браузерах, как и ожидалось, но не во всех браузерах.
Ожидаемый: данные из josn должны загружаться во все браузеры. Я хотел бы знать, какой должен быть простой и лучший подход для загрузки json из локального пути к файлу.
Факт: приведенный выше java-скрипт не загружает данные во всех браузерах