-1
我在處理json對象時遇到問題。該頁面的表格有一個下拉列表，當您選擇一個卡車號碼時，表格的其餘部分將被填充來自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));
| });
|}
對不起，我在問題區域切斷了我的代碼。在這種情況下使用parseJSON的 – jaz1976
絕對沒有意義。你沒有json。 –
感謝凱文，您的評論讓我看看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 – jaz1976