DronesクラスのデータはHTMLに読み込まれませんが、ほぼ同じクラスが動作します

Question

これは非常に精巧なチュートリアルアプリです。そのPluralsight ES6のjavascriptコースから。私は車のテーブルと同様に無人機のテーブルを表示することでそれを終了したい。現在、他のすべてが動作します。ここで

は、完全なアプリケーションです：https://github.com/gareththomasnz/PluralsightJSOOP

艦隊-data.jsファイルからデータを取得し、どちらも無人偵察機クラス&車のクラスがあります。

コースでは、彼は私がやろうと決めたドローンデータの読み込みが不足しています。しかしそれは表示されていません。

は、私はこの問題はfleet-data-service.js内かもしれ疑う：

import {Car} from '../classes/car.js'; 
import {Drone} from '../classes/drone.js'; 
import {DataError} from './data-error.js'; 

export class FleetDataService { 

constructor() { 
    this.cars = []; 
    this.drones = []; 
    this.errors = [];  
}  

getCarByLicense(license) { 
    return this.cars.find(function(car) { 
     return car.license === license; 
    }); 
} 

getCarsSortedByLicense() { 
    return this.cars.sort(function(car1, car2) { 
     if (car1.license < car2.license) 
      return -1; 
     if (car1.license > car2.license) 
      return 1; 
     return 0; 
    }); 
} 

filterCarsByMake(filter) { 
    return this.cars.filter(car => car.make.indexOf(filter) >= 0); 
} 

getDroneByLicense(license) { 
    return this.drones.find(function(drone) { 
     return drone.license === license; 
    }); 
} 

getDronesSortedByLicense() { 
    return this.drones.sort(function(drone1, drone2) { 
     if (drone1.license < drone2.license) 
      return -1; 
     if (drone1.license > drone2.license) 
      return 1; 
     return 0; 
    }); 
} 

filterDronesByBase(filter) { 
    return this.drones.filter(drone => drone.base.indexOf(filter) >= 0); 
} 

loadData(fleet) { 
    for (let data of fleet) { 
     switch(data.type) { 
      case 'car': 
       if (this.validateCarData(data)) { 
        let car = this.loadCar(data); 
        if (car) 
         this.cars.push(car); 
       } 
       else { 
        let e = new DataError('invalid car data', data); 
        this.errors.push(e); 
       } 
       break; 
      case 'drone': 
       if (this.validateDroneData(data)) { 
        let drone = this.loadDrone(data); 
        if (drone) 
         this.drones.push(drone); 
       } 
       else { 
        let e = new DataError('invalid drone data', data); 
        this.errors.push(e); 
       } 
       break; 
      default: 
       let e = new DataError('Invalid vehicle type', data); 
       this.errors.push(e); 
       break; 
     } 
    } 
} 

loadCar(car) { 
    try { 
     let c = new Car(car.license, car.model, car.latLong); 
     c.miles = car.miles; 
     c.make = car.make; 
     return c; 
    } catch(e) { 
     this.errors.push(new DataError('error loading car', car)); 
    } 
    return null; 
} 

validateCarData(car) { 
    let requiredProps = 'license model latLong miles make'.split(' '); 
    let hasErrors = false; 

    for (let field of requiredProps) { 
     if (!car[field]) { 
      this.errors.push(new DataError(`invalid field ${field}`, car)); 
      hasErrors = true; 
     } 
    } 

    if (Number.isNaN(Number.parseFloat(car.miles))) { 
     this.errors.push(new DataError('invalid milage', car)); 
     hasErrors = true; 
    } 
    return !hasErrors; 
} 

loadDrone(drone) { 
    try { 
     let d = new Drone(drone.license, drone.model, drone.latLong); 
     d.airTimeHours = drone.airTimeHours; 
     d.base = drone.base; 
     return d; 
    } catch(e) { 
     this.errors.push(new DataError('error loading drone', drone)); 
    } 
    return null; 
} 
validateDroneData(drone) { 
    let requiredProps = 'License Model airTimeHours Base'.split(' '); 
    let hasErrors = false; 

    for (let field of requiredProps) { 
     if (!drone[field]) { 
      this.errors.push(new DataError(`invalid field ${field}`, drone)); 
      hasErrors = true; 
     } 
    } 

    if (Number.isNaN(Number.parseFloat(drone.airTimeHours))) { 
     this.errors.push(new DataError('invalid Air hours', drone)); 
     hasErrors = true; 
    } 
    return !hasErrors; 
} 


} 

Answer 1

データはここに結果が示されていない問題：この方法では fleet-data-service.js

：理由は、偽の戻り値のvalidateDroneData()、ので、 「エラー」があります。

let requiredProps = 'License Model airTimeHours Base'.split(' '); 

あなたはこのように、小文字でプロパティを記述する必要があります。

let requiredProps = 'license model airTimeHours base'.split(' '); 

をこの1の後、データは示されています。

let field = row[property.toLowerCase()]; 

クラスのような特性が適合しなかったので、あなたがいない任意の問題を抱えていた：

data-table.jsでデータプロパティのチェックは、この行は次のとおりです。 は、その後、あなたは新しい問題を抱えています。 クラス内にairTimeHoursがある場合、結果はundefinedになります。これは今度はairtimehours（上記の.toLowerCase（）を覚えているので）です。

クラス内にプロパティairtimehoursと書いてください。

d.airtimehours = drone.airTimeHours; 

で

fleet-data-service.js

d.airTimeHours = drone.airTimeHours; 

私は、これはさらにあなたを得ることを願っています。