从json加载到HTML / JavaScript中

Posted 2021-04-30

因此，我正在做一个小项目，在该项目中，我需要将有关产品的一些数据放入json文件中，然后将该数据加载到html代码的javascript部分中。问题是我不断收到类似Microsoft Visual Code的错误消息，告诉我我要加载的对象的定义不足。这是我的JSON文件：

{    
"Data" : 
[        
{"Name": "Widget", "Price": 25.00, "Quantity": 5 },
{"Name": "Thing", "Price": 15.00, "Quantity": 5 },        
{"Name": "Doodad", "Price": 5.00, "Quantity": 10 } 
] 

}

这是HTML页面中的代码。

<form id="form1">
What product do you wish to search for? <input name="name" type="text" size="20">
</form>
<button onclick="outputprodus()">Submit
</button>
<script type="text/javascript" src="Vlad.json"></script>

<script>
    var userdata = JSON.parse(Data);
    var produs1_nume = userdata[0].Name;
    var produs1_pret = userdata[0].Price;
    var produs1_cantitate = userdata[0].Quantity;



    function outputprodus(){
    var x, y;
    x=document.getElementById("form1");
    y=x.elements["name"].value;
    document.write(y+" este produsul cautat.");
    document.write("<br>");
    document.write(produs1_nume+" costa "+produs1_pret+" pentru "+produs1_cantitate+" bucati");
    }
</script>

我加载数据是否错误，还是之后犯了一些错误？

答案

您还缺少一个数据。您应该访问JSON.parse（Data）.Data，修改后的代码

var Data  = {    
"Data" : 
[        
{"Name": "Widget", "Price": 25.00, "Quantity": 5 },
{"Name": "Thing", "Price": 15.00, "Quantity": 5 },        
{"Name": "Doodad", "Price": 5.00, "Quantity": 10 } 
];

// You need to go one more step inside to access. 
// This is what you have been missing
var userdata = JSON.parse(Data).Data;
var produs1_nume = userdata[0].Name;
var produs1_pret = userdata[0].Price;
var produs1_cantitate = userdata[0].Quantity;