JSFiddle - React, Tailwind, and code Playground

CSS

{"item":[
{"itemCode":91,
"itemName":"塩ラーメン",
"itemPrice":300},

{"itemCode":94,
"itemName":"味噌ラーメン",
"itemPrice":290},

{"itemCode":95,
"itemName":"豚骨ラーメン",
"itemPrice":320}
]
}

JavaScript

httpObj = createXMLHttpRequest(displayData);
if (httpObj)
{
httpObj.open("GET",fName,true);
httpObj.send(null);
}
}
function displayData()
{
if ((httpObj.readyState == 4) && (httpObj.status == 200))
{
$("result").innerHTML = parseJSON(httpObj.responseText);
}
}
// JSONのデータを解析して表示
function parseJSON(jsData)
{
var data = eval("("+jsData+")");
var resultData = "<table border='1'>";
for(var i=0; i<data.item.length; i++)
{
var iCode = data.item[i].itemCode; // 商品コード
var iName = data.item[i].itemName; // 商品名
var iPrice = data.item[i].itemPrice; // 商品価格
resultData += "<tr><th>"+iCode+"</th><td>"+iName+"</td><td>"+iPrice+"円</td></tr>";
}
resultData += "</table>";
return resultData;
}
// --></script>
</head>
<body>
<h1>JSONのデータを表示する2</h1>
<p>JSONのデータを読み込み表示します</p>
<form name="ajaxForm">
<input type="button" value="jsondata.txtを読み込み" onClick="loadDataFile('jsondata.txt')"><br>
</form>
<div id="result"></div>
</body>
</html>