JSON对象未处理

Question

我在处理 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 后端的翡翠。

  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);
      |  });
      |});

更改部分无法正常工作。我得到 Uncaught SyntaxError: Unexpected token o at | var obj = jQuery.parseJSON(truckToEdit);

如果我把它拿出来然后只做y = truckToEdit.location 我得到未定义

在 console.log(truckToEdit) 我从 devTools 控制台得到这个

  [Object]0: ObjectdateBack: ""dateOut: ""description: "20' DUMP"driver:    ""location: "Oxford"repairs: ""status: "OK"truckNum: "99-999"__proto__:   Objectlength: 1__proto__: Array[0]

不知道我做错了什么。

      |$("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));
      |  });
      |}

Answer 1

感谢 Kevin，您的评论让我了解了 devTools 向我展示的内容。即使它显示 [Object]0: ObjectdateBack: ""dateOut: ""description: "20' DUMP"driver: ""location: "Oxford"repairs: ""status: "OK"truckNum: "99-999"proto : Objectlength: 1__proto__: Array[0] 我真正看到的是一个只有一个索引的数组。这告诉我将其视为一个数组以从中获取每个属性。示例 var obj0 = truckToEdit[0].location 并将其放入 document.getElementById('editYard').value = obj0