如何将JSON数据操作为javascript并显示在HTML

Question

我正在尝试从我的服务器获取JSON数据并操纵价格进行比较。我相信JavaScript是正确的语言，但我可能是错的。

我会从html上的表单中获取一个输入来切换＆＃34; Shell＆＃34;和＃34; ARCO＆＃34;并且还可以添加位置的总成本，并能够在其他功能中使用它。

我可以将单个项目放入可以随时间更改的变量中吗？

谢谢！

Answer 1

我将根据我如何理解这个问题回答这个问题，那就是从json文件中读取数据，以便在html页面中使用它。

//This is our Ajax function to load the JSON data
 function ajaxLoad(path,callback){
 try{
 var response;
 var xmlhttp =new XMLHttpRequest();
 xmlhttp.onreadystatechange=function() {
 if(this.readyState==4&&this.status==200) {
 response=this.responseText;
 callback(response);
 }
 }

 xmlhttp.open("POST",path,true);
 xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
 xmlhttp.send();

}
catch(e){
alert(e.message);
}
 }

//now load the data
var itemsData;
var shellProds=[];
var arcoProds=[];

ajaxLoad("Items.json",function(data){
itemsData=JSON.parse(data);
for(i in itemsData.items){try{
if(itemsData.items[i].location=="shell"){
shellProds[i].itemid=itemsData.items[i].itemid;
shellProds[i].name=itemsData.items[i].name;
shellProds[i].price=itemsData.items[i].price;
}else{

arcoProds[i].itemid=itemsData.items[i].itemid;
arcoProds[i].name=itemsData.items[i].name;
arcoProds[i].price=itemsData.items[i].price;
} 

//now you have loaded the data.
}
catch(e){
alert(e.message);

}
}
});

//This is our Ajax function to load the JSON data function ajaxLoad(path,callback){ try{ var response; var xmlhttp =new XMLHttpRequest(); xmlhttp.onreadystatechange=function() { if(this.readyState==4&&this.status==200) { response=this.responseText; callback(response); } } xmlhttp.open("POST",path,true); xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xmlhttp.send(); } catch(e){ alert(e.message); } } //now load the data var itemsData; var shellProds=[]; var arcoProds=[]; ajaxLoad("Items.json",function(data){ itemsData=JSON.parse(data); for(i in itemsData.items){try{ if(itemsData.items[i].location=="shell"){ shellProds[i].itemid=itemsData.items[i].itemid; shellProds[i].name=itemsData.items[i].name; shellProds[i].price=itemsData.items[i].price; }else{ arcoProds[i].itemid=itemsData.items[i].itemid; arcoProds[i].name=itemsData.items[i].name; arcoProds[i].price=itemsData.items[i].price; } //now you have loaded the data. } catch(e){ alert(e.message); } } });

所以现在你有两个带有加载数据的对象数组。