Javascript JSON对象未处理
我在处理json对象时遇到问题。该页面有一个表单,该表单有一个下拉列表,当您选择一个卡车编号时,表单的其余部分将填充来自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
[
{
"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));
| });
|}