从 ajax json 响应获取数据时出错

Question

我正在尝试从 ajax 的 JSON 响应中获取数据，当我尝试在循环之外获取数据时没有问题（console.log 命令有效），但是当它在里面时会出错

TypeError: 无法读取未定义的属性“TOTALITEM”

console.log 命令给出了上述错误。同样的情况发生在第二个“orc[i].NITEM”上，但它起作用了，我不知道为什么。 我还尝试对这些值求和并附加在第二位，但它也没有用。如果有人能解释为什么会这样，我将非常感激。谢谢！！

var obj= JSON.parse(data);
                var orc = obj.DADOS.ORCITENS[0].ITENSORC.LITEM;
                var tamanho = orc.length;
                var total=0;
                $(".lista-orcamento").empty();
                console.log(orc[0].TOTALITEM);
                for(var x = 0; x <= tamanho; x++)
                {
                    console.log(orc[x].TOTALITEM);
                        total+= parseFloat(orc[x].TOTALITEM);

                }
                console.log(total);

                for(var i = 0; i <= tamanho; i++)
                {
                    $(".lista-orcamento").append
                        ('<div class="row produtos" >'+
                            '<div class="col-1">'+orc[i].NITEM+'</div>'+
                             '<div class="col-1"> <input type="text" class="form-control codigo" value='+orc[i].CODPRODUTO+'></div>'+
                             '<div class="col-1"> <input type="text" class="form-control quantidade" value='+orc[i].QTDVENDIDO+'></div>'+
                             '<div class="col-3"> <input type="text" class="form-control descricao" value='+orc[i].DESCRICAO+'></div>'+
                             '<div class="col-1">'+
                             '<select  class="form-control prcu">'+
                                '<option value="001">'+orc[i].PRCUNIT+'</option>'+
                             '</select></div>'+
                             '<div class="col-1"> <input type="text" class="form-control prcv" value='+orc[i].PRCVENDA+'></div>'+
                             '<div class="col-1"> <input type="text" class="form-control desco" value='+orc[i].DESCPUNIT+'></div>'+
                             '<div class="col-1"> <input type="text" class="form-control prct" value='+orc[i].TOTALITEM+'></div>'+
                             '<div class="col-1"> <input type="text" class="form-control descot" value='+orc[i].DESCVUNIT+'></div>'+
                             '<div class="col-1"> <input type="text" class="form-control obs" value='+orc[i].OBSITEM+'></div>'+
                          '</div>'
                        );
                }// fim do for

            }//fim sucesso

Answer 1

如果假设您提供的代码在 success 回调中，它可能看起来像：

$.ajax({
  url: "get-orc-data.php",
  data: { id: 0 },
  dataType: "json",
  method: "post",
  success: function(data){
    // Your Code
    var obj = JSON.parse(data);
    var total = 0;
  }
});

在上面的示例中，请记住 obj 和 total 将仅针对该函数的范围定义。您不能在该函数之外调用obj 或total。如果您需要更新该变量，请创建一个适用于更全球化领域的变量。

考虑这段代码：

$(function(){
  var total = 0;
  $.ajax({
    url: "get-orc-data.php",
    data: { id: 0 },
    dataType: "json",
    method: "post",
    success: function(data){
      console.log(data);
      var orc = data.DADOS.ORCITENS[0].ITENSORC.LITEM;
      $(".lista-orcamento").empty();
      console.log("Counting Total: " + total);
      $.each(orc, function(k, v){
        console.log("Adding: " + v.TOTALITEM);
        total += parseFloat(v.TOTALITEM);
      });
      console.log("Total Calculated: " + total);
      $.each(orc, function(k, v){
        $(".lista-orcamento").append(
          '<div class="row produtos" >',
          '<div class="col-1">' + v.NITEM + '</div>',
          '<div class="col-1"> <input type="text" class="form-control codigo" value=' + v.CODPRODUTO + '></div>',
          '<div class="col-1"> <input type="text" class="form-control quantidade" value=' + v.QTDVENDIDO + '></div>',
          '<div class="col-3"> <input type="text" class="form-control descricao" value=' + v.DESCRICAO + '></div>',
          '<div class="col-1">',
          '<select  class="form-control prcu">',
          '<option value="001">' + v.PRCUNIT + '</option>',
          '</select></div>',
          '<div class="col-1"> <input type="text" class="form-control prcv" value=' + v.PRCVENDA + '></div>',
          '<div class="col-1"> <input type="text" class="form-control desco" value=' + v.DESCPUNIT + '></div>',
          '<div class="col-1"> <input type="text" class="form-control prct" value=' + v.TOTALITEM + '></div>',
          '<div class="col-1"> <input type="text" class="form-control descot" value=' + v.DESCVUNIT + '></div>',
          '<div class="col-1"> <input type="text" class="form-control obs" value=' + v.OBSITEM + '></div>'+
          '</div>'
        );
      });
    }
  });
});

现在total可以用于其他功能。

此外，由于 $.ajax() 调用定义了 dataType，它应该已经期待一个 JSON 对象。查看控制台应该可以确认这一点，因为应该返回一个带有您期望的数据结构的对象。如果你得到其他东西，你会想要查看代码并确保它与数据结构匹配或查看 API。

希望对您有所帮助。