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

Posted 2023-05-08

【中文标题】尝试在 if 语句中检查 json 响应时出现未捕获（承诺）错误

【英文标题】：Uncaught (in promise) error when trying to check a json response in an if statement

【发布时间】：2020-10-19 02:49:21

【问题描述】：

我将数据作为 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();
  );

【问题讨论】：

slicedHrefUrl 长什么样子？

data[i]来自哪里？您没有在代码中的任何地方循环遍历 data 吗？如果您检查data 中的所有id，然后循环遍历它，== 则等于 buttonId 就可以了。

【参考方案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>

【讨论】：

代码有效！我明白我现在做错了什么。感谢您抽出宝贵时间，非常感谢。

@SiimmKahn 我很高兴现在一切都为你工作，我能够帮助你。