尝试检查 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还要循环，所以我会把那个留给你。

工作演示： 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() {

  //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>