尝试检查 if 语句中的 json 响应时出现未捕获（承诺）错误

Question

我将数据作为 JSON 对象，如果数据 JSON 对象中的 id 与 buttonId 的 id 匹配，我想将数据元素推送到 jsonArray 中。然后我想发送到模态的 innerHTML 进行显示。

数据得到响应：

---

[{"id":"4","task_detail":"Use online reports to gather data, confirm with manager and push client data back to Github."},{"id":"6","task_detail":"Pull client data, analyse and push back"},{"id":"9","task_detail":"Perms and user roles in db need creating"},{"id":"10","task_detail":"Pull expense data into API JSON the graph with AJAX and Chart JS"},{"id":"11","task_detail":"Left Side Navigation, requires BS and CSS Style"},{"id":"12","task_detail":"CSS Pipeline color scheme"},{"id":"13","task_detail":"Pull from db and display"},{"id":"14","task_detail":"Export to Excel for tables in reports"},{"id":"15","task_detail":"Test and come up with report data\/ideas to complete"},{"id":"16","task_detail":"Sort by status and date created"},{"id":"17","task_detail":"Add date created to the pipeline table"},{"id":"18","task_detail":"Display info"},{"id":"19","task_detail":"Add option for user to change details - password"},{"id":"20","task_detail":"Collapse from Bootstrap"},{"id":"21","task_detail":"After complete with 1, mimic to 2-5, update project.php buttons"},{"id":"22","task_detail":"Use alert or modal viewer to check if user if sure to delete, once btn pressed"}]

---

错误：409 未捕获（承诺中）类型错误：无法在 handleJsonData 读取未定义的属性“id”

用于线  if (arrData[i].id == buttonId) {

const pipe_api_url = 'http://localhost/site/handler.php';

  var buttonId;

  var taskDetail;

  var jsonArray = [];

  const data = [];

  var stringData = [];

  

async function handleJsonData() {

  

    const response = await fetch(pipe_api_url);

    const data = await response.json();

    var stringData = JSON.stringify(data);

    console.log("Data: "+data);

    console.log("stringData: "+stringData);

    var hrefurl = window.location.href;

    console.log("handleJsonData hrefurl: "+hrefurl);

    var btnIndex = hrefurl.indexOf("btnId=");

    console.log("handleJsonData btnIndex: "+btnIndex); //index 49 at currently

Answer 1

这是适合您的工作代码。你变得未定义的原因data[i].id是你没有遍历你的data响应数组我重新创建了一些 HTML 并添加了静态定义的response=以重新创建工作代码。data您可以看到我正在forEach()处理数据并检查是否buttonId与data.id它增加了task_details四次jsonArray，我不知道你为什么button.length还要循环，所以我会把那个留给你。工作演示：&nbsp;https ://jsfiddle.net/usmanmunir/eros9puf/31/运行下面的代码片段以查看它的工作原理const pipe_api_url = 'http://localhost/site/handler.php';var buttonId;var taskDetail;var jsonArray = [];const data = [];var stringData = [];async function handleJsonData() {&nbsp; //const response = await fetch(pipe_api_url);&nbsp; const data = [{&nbsp; &nbsp; "id": "4",&nbsp; &nbsp; "task_detail": "Use online reports to gather data, confirm with manager and push client data back to Github."&nbsp; }, {&nbsp; &nbsp; "id": "6",&nbsp; &nbsp; "task_detail": "Pull client data, analyse and push back"&nbsp; }, {&nbsp; &nbsp; "id": "9",&nbsp; &nbsp; "task_detail": "Perms and user roles in db need creating"&nbsp; }, {&nbsp; &nbsp; "id": "10",&nbsp; &nbsp; "task_detail": "Pull expense data into API JSON the graph with AJAX and Chart JS"&nbsp; }, {&nbsp; &nbsp; "id": "11",&nbsp; &nbsp; "task_detail": "Left Side Navigation, requires BS and CSS Style"&nbsp; }, {&nbsp; &nbsp; "id": "12",&nbsp; &nbsp; "task_detail": "CSS Pipeline color scheme"&nbsp; }, {&nbsp; &nbsp; "id": "13",&nbsp; &nbsp; "task_detail": "Pull from db and display"&nbsp; }, {&nbsp; &nbsp; "id": "14",&nbsp; &nbsp; "task_detail": "Export to Excel for tables in reports"&nbsp; }, {&nbsp; &nbsp; "id": "15",&nbsp; &nbsp; "task_detail": "Test and come up with report data\/ideas to complete"&nbsp; }, {&nbsp; &nbsp; "id": "16",&nbsp; &nbsp; "task_detail": "Sort by status and date created"&nbsp; }, {&nbsp; &nbsp; "id": "17",&nbsp; &nbsp; "task_detail": "Add date created to the pipeline table"&nbsp; }, {&nbsp; &nbsp; "id": "18",&nbsp; &nbsp; "task_detail": "Display info"&nbsp; }, {&nbsp; &nbsp; "id": "19",&nbsp; &nbsp; "task_detail": "Add option for user to change details - password"&nbsp; }, {&nbsp; &nbsp; "id": "20",&nbsp; &nbsp; "task_detail": "Collapse from Bootstrap"&nbsp; }, {&nbsp; &nbsp; "id": "21",&nbsp; &nbsp; "task_detail": "After complete with 1, mimic to 2-5, update project.php buttons"&nbsp; }, {&nbsp; &nbsp; "id": "22",&nbsp; &nbsp; "task_detail": "Use alert or modal viewer to check if user if sure to delete, once btn pressed"&nbsp; }]&nbsp; var stringData = JSON.stringify(data);&nbsp; //console.log("Data: "+data);&nbsp; //console.log("stringData: "+stringData);&nbsp; var hrefurl = window.location.href;&nbsp; //console.log("handleJsonData hrefurl: "+hrefurl);&nbsp; var btnIndex = hrefurl.indexOf("btnId=1");&nbsp; //console.log("handleJsonData btnIndex: "+btnIndex); //index 49 at currently&nbsp; var startOfurlSlice = btnIndex + 6;&nbsp; var endOfUrlSlice = btnIndex.length;&nbsp; var slicedHrefUrl = hrefurl.slice(startOfurlSlice, endOfUrlSlice);&nbsp; //console.log("handleJsonData slicedHrefUrl: "+slicedHrefUrl);&nbsp; //var buttonId = slicedHrefUrl;&nbsp; var buttonId = 4;&nbsp; for (i = 0; i <= buttonId; i++) {&nbsp; &nbsp; data.forEach(function(data) {&nbsp; &nbsp; &nbsp; if (data.id == buttonId) {&nbsp; &nbsp; &nbsp; &nbsp; //jsonArray.push(data[0].id);&nbsp; &nbsp; &nbsp; &nbsp; jsonArray.push(data.task_detail);&nbsp; &nbsp; &nbsp; &nbsp; //console.log("handleJsonData jsonArray " + jsonArray);&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; })&nbsp; }&nbsp; document.getElementById("show-task-details").innerHTML = jsonArray;}$("button").click(async function() {&nbsp; buttonId = this.id; // or alert($(this).attr('id'));&nbsp; //window.location.href = "http://localhost/site/handler.php?btnId=" + buttonId;&nbsp; document.getElementById("modalLabelPipeDetail").innerHTML = "Details #" + buttonId;&nbsp; handleJsonData();});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><button id="4">Click ME - ID = 4</button><div id="modalLabelPipeDetail"></div><div id="show-task-details"></div>