[英]Why aren't browsers displaying JSON data when fetched from Vue.js app
[英]Displaying appropriate error message when data from JSON doesn't get fetched in HTML
我有一個示例JSON:
[
{
"componentid": 4,
"displayImageUrl": "https://via.placeholder.com/350x200",
"title": "theme",
"shortdesc": "to set theme for different applications"
},
{
"componentid": 7,
"displayImageUrl": "https://via.placeholder.com/350x200",
"title": "preferences",
"shortdesc": "preferences screen for apps"
}
]
我有一個經過JSON上方的JavaScript代碼並獲取數據
函數prepareTopComponentList(data){
try {
var preparedHtml = "";
for (var count = 0; count < data.length; count++) {
preparedHtml += "<div class=\"col-lg-4\" style=\"margin-top: 20px\">\n" +
" <div class=\"card wow fadeIn\" data-wow-delay=\"0.2s\">\n" +
" <img class=\"img-fluid\" src=\"";
preparedHtml += data[count].displayImageUrl;
preparedHtml += "\" alt=\"N/A\">\n" +
" <div class=\"card-body\">\n" +
" <h4 class=\"card-title\">";
preparedHtml += data[count].title;
preparedHtml += "</h4>\n" +
" <p class=\"card-text\">";
preparedHtml += data[count].shortdesc;
preparedHtml += "</p>\n" +
" <a onclick='Redirect(this)' href='#' class=\"btn btn-info\" id=\"";
preparedHtml += "component_desc_=" + data[count].componentid;
preparedHtml += "\">Learn more</a>\n" +
" </div>\n" +
"\n" +
" </div>\n" +
" </div>";
}
$("#div_top_component").append(preparedHtml);
} catch (err) {
}
}
function Redirect(element) {
try {
window.location = "http://localhost:9090/Reusable%20Components/pages/homepage.php?" + element.id;
} catch (err) {
}
}
我也有顯示錯誤的HTML代碼:
<!--Error/Warning Modal-->
<div class="modal fade" id="modal_show_error" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" id="modal_error_title"></h4>
</div>
<div class="modal-body">
<p id="modal_error_description"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Okay</button>
</div>
</div>
</div>
</div>
我正在從JSON獲取componentid
。 但是,如果它為NULL
,那么我想彈出一個引導錯誤,說componentid
為NULL
。 上面的JavaScript代碼的Catch
塊為空,我沒有得到應該放入的代碼以使引導錯誤彈出。
如果如果其中一項無效,則根本不希望添加任何字符串,則可以使用以下命令(我在es6中做到了,但是獲得了ID)
如果只想添加有效項目,則可以用return memo;
代替throw語句return memo;
try {
const preparedHtml = data.reduce((memo, item) => {
if(typeof(item.componentid) === typeof(null))
throw new Error(`All items must have a componentid`);
const htmlChunk = `<div class="col-lg-4" style="margin-top: 20px">\n
<div class="col-lg-4" style="margin-top: 20px">\n
<div class="card wow fadeIn" data-wow-delay="0.2s">\n
<img class="img-fluid" src="${item.displayImageUrl} alt="N/A">\n
<div class="card-body">\n
<h4 class="card-title">${item.title}</h4>\n
<p class="card-text">${item.shortdesc}</p>\n
<a onclick='Redirect(this)'
href='#' class=\"btn btn-info\" id=\""
component_desc_="${item.componentid}">Learn more</a>\n
</div>\n\n
</div>\n
</div>`;
return memo.concat(htmlChunk);
}, '');
$('#div_top_component').append(preparedHtml);
} catch (err) {
//bootstrap modal code
}
===用於檢查值的質量和變量的類型。
你可以做這樣的事情...
if(data[count].componentid === undefined || data[count].componentid === null){
//Use your modal code
}
else{
//preparedHTML code
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.