尝试在 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"}]

---

ERROR: 409 Uncaught (in promise) TypeError: Cannot read property 'id' of undefined 在handleJsonData

对于线 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

   
    var startOfurlSlice = btnIndex + 6;
    var endOfUrlSlice = btnIndex.length;

    var slicedHrefUrl = hrefurl.slice(startOfurlSlice, endOfUrlSlice);
    console.log("handleJsonData slicedHrefUrl: "+slicedHrefUrl);
    var buttonId = slicedHrefUrl;

    for(i = 0; i <= buttonId; i++) {
      if (data[i].id == buttonId) {
        jsonArray = [];
        //jsonArray.push(data[i].id);
        jsonArray.push(data[i].task_detail);
        console.log("handleJsonData jsonArray "+jsonArray);
    }

  }
  document.getElementById("show-task-details").innerHTML = jsonArray;
}
  $("button").click(async function() {
    buttonId = this.id; // or alert($(this).attr('id'));
    console.log("getBtnId: "+buttonId);
    window.location.href = "http://localhost/site/handler.php?btnId=" + buttonId;
    document.getElementById("modalLabelPipeDetail").innerHTML = "Details #" + buttonId;
    handleJsonData();
  });

Answer 1

这是适合您的工作代码。

您的data[i].id 未定义的原因是您没有循环通过您的data 响应数组

我重新创建了一些 HTML 并添加了静态定义的 response = data 以重新创建工作代码。

您可以看到我正在对数据执行 forEach() 并检查 buttonId 是否与 data.id 匹配

它将task_details 添加到jsonArray 四次，我不知道你为什么还要循环访问button.length，所以我会把那个留给你。

工作演示： https://jsfiddle.net/usmanmunir/eros9puf/31/

在下面运行 sn-p 以查看它的工作情况

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 = [{
    "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"
  }]
  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=1");
  //console.log("handleJsonData btnIndex: "+btnIndex); //index 49 at currently


  var startOfurlSlice = btnIndex + 6;
  var endOfUrlSlice = btnIndex.length;

  var slicedHrefUrl = hrefurl.slice(startOfurlSlice, endOfUrlSlice);
  //console.log("handleJsonData slicedHrefUrl: "+slicedHrefUrl);
  //var buttonId = slicedHrefUrl;

  var buttonId = 4;

  for (i = 0; i <= buttonId; i++) {
    data.forEach(function(data) {
      if (data.id == buttonId) {
        //jsonArray.push(data[0].id);
        jsonArray.push(data.task_detail);
        //console.log("handleJsonData jsonArray " + jsonArray);
      }
    })
  }
  document.getElementById("show-task-details").innerHTML = jsonArray;
}
$("button").click(async function() {
  buttonId = this.id; // or alert($(this).attr('id'));
  //window.location.href = "http://localhost/site/handler.php?btnId=" + buttonId;
  document.getElementById("modalLabelPipeDetail").innerHTML = "Details #" + buttonId;
  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>