Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/jquery/76.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript JSON对象未处理_Javascript_Jquery_Json_Express_Pug - Fatal编程技术网

Javascript JSON对象未处理

Javascript JSON对象未处理,javascript,jquery,json,express,pug,Javascript,Jquery,Json,Express,Pug,我在处理json对象时遇到问题。该页面有一个表单,该表单有一个下拉列表,当您选择一个卡车编号时,表单的其余部分将填充来自json文件的数据 这是一个数据示例 [ { "truckNum":"62-559", "description":"MOFFET TRUCK", "driver":"Kevin Conroy", "status":"OK", "dateOut":"", "repairs":"", "dateBac

我在处理json对象时遇到问题。该页面有一个表单,该表单有一个下拉列表,当您选择一个卡车编号时,表单的其余部分将填充来自json文件的数据

这是一个数据示例

  [
   {
     "truckNum":"62-559",
     "description":"MOFFET TRUCK",
     "driver":"Kevin Conroy",
     "status":"OK",
     "dateOut":"",
     "repairs":"",
     "dateBack":"",
     "location":"Berlin"
   },
   {
     "truckNum":"M-28",
     "description":"MOFFET",
     "driver":"Moffet",
     "status":"OK",
     "dateOut":"",
     "repairs":"",
     "dateBack":"",
     "location":"Berlin"
   },
   {
     "truckNum":"62-443",
     "description":"20' DUMP",
     "driver":"",
     "status":"OK",
     "dateOut":"",
     "repairs":"",
     "dateBack":"",
     "location":"Berlin"
   },
   {
     "truckNum":"sub",
     "description":"",
     "driver":"Mark Trainer",
     "status":"OK",
     "dateOut":"",
     "repairs":"",
     "dateBack":"",
     "location":"Berlin"
   }
  ]
这是我的页面代码。我正在使用带有expressjs后端的jade

  extends layout

  block content
    div(class='container')
      header
       h1 National Lumber Co. / Reliable Truss & Component
       h2 Fleet Maintenance Administration
    div(class='section')
       h3 Edit Truck
       form(role='form' id='formfield' method='POST')
         div(class='form-group')
           div(class='well well-lg')
             label(for='vehicleNo') Vehicle Number to be Edited
             select(class='form-control' id='vehicleNo' name='vehicleNo')
               option(value='default') -- Select One --
             label(for='editYard') Yard
             select(class='form-control' id='editYard' name='location')
               option(value='default') -- Select One --
             label(for='editVehicleNo') Vehicle Number
             input(type='text' id='editVehicleNo' class='form-control'      name='truckNum')
             label(for='editVehicleDesc') Vehicle Description
             input(type='text' id='editVehicleDesc' class='form-control' name='description')
             label(for='editDriverName') Driver Name
             input(type='text' id='editDriverName' class='form-control' name='driver')
             label(for='editStatus') Status
             select(id='editStatus' class='form-control' name='status')
              option(value='default') -- Select One --
             label(for='editDateOut') Date Out of Service
             input(type='text' id='editDateOut' class='form-control' name='dateOut')
             label(for='editDateBack') Est. Date Back in Service
             input(type='text' id='editDateBack' class='form-control' name='dateBack')
             label(for='editRepairs') Repairs Being Done
             input(type='text' id='editRepairs' class='form-control' name='repairs')
           button(type='submit' name='edit' id='edit' class='btn btn-primary') Edit
    script
      |var v;
      |var t;
      |var trucks;
      |var stat;
      |var uniqueLocations = [];
      |var uniqueStatus = [];
      |var y;
      |$(document).ready(function(){
      |  $.getJSON('/components/trucks.json', function(data){
      |    trucks = data;
      |    data = sortByLocation(data, 'truckNum');
      |    var htmlTruckNum = '';
      |    var htmlYard = '';
      |    var htmlStatus = '';
      |    var len = data.length;
      |    for (var i = 0; i< len; i++) {
      |      htmlTruckNum += '<option value="' + data[i].truckNum + '">' + data[i].truckNum + '</option>';
      |    }
      |    $('select#vehicleNo').append(htmlTruckNum);
      |    trucks = sortByLocation(trucks, 'location');
      |    for(var i = 0; i < trucks.length; i++){
      |      if(uniqueLocations.indexOf(trucks[i].location) === -1){
      |        uniqueLocations.push(trucks[i].location);
      |      }
      |    }
      |    for(var j = 0; j < uniqueLocations.length; j++){
      |      htmlYard += '<option value="' + uniqueLocations[j] + '">' + uniqueLocations[j] + '</option>';
      |    }
      |    $('select#editYard').append(htmlYard);
      |    stat = sortByLocation(trucks, 'status');
      |    for(var i = 0; i < trucks.length; i++){
      |      if(uniqueStatus.indexOf(trucks[i].status) === -1){
      |        uniqueStatus.push(trucks[i].status);
      |      }
      |    }
      |    for(var x = 0; x < uniqueStatus.length; x++){
      |      htmlStatus += '<option value="' + uniqueStatus[x] + '">' +         uniqueStatus[x] + '</option>';
      |    }
      |    $('select#editStatus').append(htmlStatus);
      |  });
      |});
不知道我做错了什么

      |$("select#vehicleNo").on('change', function () {
      |  v = document.getElementById("vehicleNo");
      |  t = v.options[v.selectedIndex].text;
      |  var truckToEdit = trucks.filter(function(item) {
      |    return item.truckNum == t;
      |  });
      |  console.log(truckToEdit);
      |  var obj = jQuery.parseJSON(truckToEdit);
      |  console.log(obj.location);
      |  document.getElementById('editVehicleDesc').value = y;
      |});

      |function sortByLocation(array, key){
      |  return array.sort(function(a, b){
      |   var x = a[key];
      |   var y = b[key];
      |   return ((x < y) ? -1 : ((x > y) ? 1 : 0));
      |  });
      |}

谢谢Kevin,您的评论让我了解了devTools向我展示的内容。尽管它显示了[Object]0:ObjectdateBack:dateOut:description:20'转储驱动程序:位置:Oxfordrepairs:status:OKtruckNum:99-999proto:Objectlength:1_____;:Array[0],但我真正看到的是一个只有一个索引的数组。这告诉我将它作为一个数组来处理,以便从中获取每个属性。示例var obj0=truckToEdit[0]。定位并将其放入document.getElementById'editYard.value=obj0

很抱歉,我在问题区域剪切了代码。在这种情况下使用parseJSON毫无意义。您没有json。谢谢Kevin,您的评论让我了解了devTools向我展示的内容。尽管它显示了[Object]0:ObjectdateBack:dateOut:description:20'转储驱动程序:位置:Oxfordrepairs:status:OKtruckNum:99-999proto:Objectlength:1_____;:Array[0],但我真正看到的是一个只有一个索引的数组。这告诉我将它作为一个数组来处理,以便从中获取每个属性。示例var obj0=truckToEdit[0]。定位并将其放入document.getElementById'editYard'。value=obj0
      |$("select#vehicleNo").on('change', function () {
      |  v = document.getElementById("vehicleNo");
      |  t = v.options[v.selectedIndex].text;
      |  var truckToEdit = trucks.filter(function(item) {
      |    return item.truckNum == t;
      |  });
      |  console.log(truckToEdit);
      |  var obj = jQuery.parseJSON(truckToEdit);
      |  console.log(obj.location);
      |  document.getElementById('editVehicleDesc').value = y;
      |});

      |function sortByLocation(array, key){
      |  return array.sort(function(a, b){
      |   var x = a[key];
      |   var y = b[key];
      |   return ((x < y) ? -1 : ((x > y) ? 1 : 0));
      |  });
      |}