未處理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); 
     | }); 
     |}); 

變更部分不能正常工作。我得到未捕獲的SyntaxError：意外的標記Ø在| 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

感謝凱文，您的評論讓我看看devTools向我展示了什麼。即使它顯示[Object] 0：ObjectdateBack：「」dateOut：「」description：「20'DUMP」driver：「」location：「Oxford」修復：「」status：「OK」truckNum：「99-999」proto ：Objectlength：1__proto__：Array [0]我真正看到的是一個只有一個索引的數組。這告訴我把它當作一個數組來獲取每個屬性。示例var obj0 = truckToEdit [0] .location，並將其放入document.getElementById（'EditYard'）。value = obj0