我希望为每个手机品牌创建多个html文件，其中包含一个通用的'.js'文件和'。json文件。我试图将"品牌"一词替换为共同的"。js"文件中每次对应的品牌名称，并从"。js"中获取相应的数据。json文件。
我使用单独的'.js'和'.js'。Json '文件驻留在同一文件夹作为我的HTML文件。然后使用"文本"。在每个html文件中替换'命令，我试图通过常见的'.js'文件从JSON文件中获取相关数据。
My html file
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="GetLocalJSON.js" type="text/javascript"></script>
</head>
<style>
</style>
<body>
<div id="AboutTab">
<div id=About>
</div>
</div>
</body>
<script>
$(document).ready(function(){
var url = "GetLocalJSON.js";
$.getScript( url, function() {
$(document.body).find('Brand').each(function() {
var text = $(this).text();
$(this).text(text.replace('Brand', 'Samsung'));
});
});
});
</script>
</html>
GetLocalJSON.js jQuery文件:
$(document).ready(function(){
var StatJSON;
jQuery.getJSON("QueryJSONData2.json", function (json) {
StatJSON = json;
var markup = '';
markup += '<div>'+ StatJSON.Phone.Brand[0].Size +'<div>'
$("#About").html(markup)
});
});
我QueryJSONData2。json json文件:
{
"Phone": {
"Samsung":[{
"Size" : "AAA",
"Camera" : "BBB",
"Weight" : "CCC"
}],
"Apple":[{
"Size" : "XXX",
"Camera" : "YYY",
"Weight" : "ZZZ"
}]
}
}
我得到的错误是"Uncaught TypeError: Cannot read property '0' of undefined"行:
markup += '<div>'+ StatJSON.Phone.Brand[0].Size +'<div>'
表示我的"text.replace"Jquery命令未被执行。我怎么解决这个问题??
您的QueryJSONData2.json在Phone对象中没有名为Brand的属性。
因此，StatJSON.Phone.Brand[0].Size将中断，因为您的Replacejquery命令将不会影响您的StatJSON对象。
我不确定你到底想要实现什么使用替换，但我猜如果你想用Brand替换Samsung，那么你应该在你的GetLocalJSON.js文件内做。
一个可能的转换如下所示。
$(document).ready(function(){
var StatJSON;
jQuery.getJSON("QueryJSONData2.json", function (json) {
StatJSON = json;
var markup = '';
//transform data to add all brands inside phone object
var brands = []
Object.keys(StatJSON.Phone).forEach(item => {
brands.push(StatJSON.Phone[item]);
delete StatJSON.Phone[item];
});
StatJSON.Phone.Brand = brands;
markup += '<div>'+ StatJSON.Phone.Brand[0].Size +'<div>'
$("#About").html(markup)
});
});
在HTML中使用数据之前，请确保你已经正确地转换了数据。
这应该会给你一些解决问题的方向。