Object.keys（object）.map（）不返回鍵

Question

我正在創建一個離子項目。

我有一個來自firebase的節點"menu" ，如下所示：

"menu" : {
    "fhsSuizYVhYfwk3jE6Hs1jJ9mul2" : {
      "-LPgLdhiRWtzGZcT68kB" : {
        "category" : "Chicken",
        "menuContent" : {
          "-LPjfZG88i8oir4qZeUr" : {
            "description" : "Tasty & Spicy",
            "menuName" : "Chicken Spicy",
            "menuPrice" : "15000"
          },
          "-LPjmsYuscg0ceMTMriM" : {
            "description" : "Delicious",
            "menuName" : "Sweet Chicken",
            "menuPrice" : "17000"
          }
        }
      },
      "-LPjoKAm8mQsNK1MAPsu" : {
        "category" : "Beef",
        "menuContent" : {
          "-LPk-5YZQtreZQw1vGyL" : {
            "description" : "Dark, sweet, spicy. Yumm!",
            "menuName" : "Beef Blackpepper",
            "menuPrice" : "20000"
          }
        }
      },
      "-LPkyRkZPXMQjXdzoWfA" : {
        "category" : "Sayur",
        "menuContent" : {
          "-LPl68GYGz1K966w5Aci" : {
            "description" : "bayam enak tumis ikan asin",
            "menuName" : "Bayam ikan asin",
            "menuPrice" : "15000"
          }
        }
      },
      "-LPlOQO3it27qTQ3sjXl" : {
        "category" : "nasi",
        "menuContent" : {
          "-LPlOUF_F44RiQZPr45k" : {
            "description" : "enak",
            "menuName" : "nasgor",
            "menuPrice" : "9000"
          }
        }
      },
      "-LPq2Rxx-J3Vi2tkTnXC" : {
        "category" : "Minuman"
      },
      "-LPq2UQ3QDzaZuZAAC7n" : {
        "category" : "Dessert"
      },
      "-LPq2Wua9lDJBJpmY4qB" : {
        "category" : "Appetizer"
      }
    }
  }

我想從該節點獲取鍵和值，並將其存儲在本地變量menuCatLocalArr 。 這是我的代碼order-menu.ts ：

export class OrderMenuPage {

  public categories: string;
  public menuCatLocalArr = [];
  private currentNumber = 0;

  menuCatRef: AngularFireList<MenuCategory>;
  menuCatData: Observable<AngularFireAction<DatabaseSnapshot<MenuCategory>>[]>;

  restoData: {key: string}; //this parameter is passed from HomePage

  public menuOrder : MenuOrder[] = [];
  public showButton: boolean = true;

  constructor(private afAuth: AngularFireAuth, private afDatabase: AngularFireDatabase,
    private toast: ToastController,
    public navCtrl: NavController, public navParams: NavParams) {
      this.restoData = navParams.get('restoDataPass');
  }

  ionViewDidLoad() {
    this.afAuth.authState.subscribe(data => {
      if(data && data.email && data.uid){

        this.menuCatRef = this.afDatabase.list<MenuCategory>(`menu/${this.restoData.key}`);
        this.menuCatData = this.menuCatRef.snapshotChanges();
        this.menuCatData.subscribe(result => {
          this.categories = result[0].payload.val().category; // assign the first category to segment
          for (let i=0; i<result.length; i++){
            if(result[i].payload.val().menuContent){
              let dataArray = {
                key: result[i].payload.key,
                category: result[i].payload.val().category,
                menuContent: Object.keys(result[i].payload.val().menuContent).map(x =>
                  result[i].payload.val().menuContent[x]
                ),
              }
              this.menuCatLocalArr.push(dataArray);
            }
            else{
              let dataArray = {
                key: result[i].payload.key,
                category: result[i].payload.val().category,
                menuContent: ''
              }
              this.menuCatLocalArr.push(dataArray);
            }
            console.log(Object.keys(result[i].payload.val().menuContent));
          }
          console.log("menuCatLocalArr: ");
          console.log(this.menuCatLocalArr);
        });
        console.log("menuCatData: ");
        console.log(this.menuCatData);

      }
      else {
      }
    });
  }
}

當I console.log(this.menuCatLocalArr) ，在menuContent下，我得到這個：

[
  {
    "0": {
      "description": "Tasty & Spicy",
      "menuName": "Chicken Spicy",
      "menuPrice": "15000"
    },
    "1": {
      "description": "Delicious",
      "menuName": "Sweet Chicken",
      "menuPrice": "17000"
    }
  }
]

請注意，密鑰（ -LPjfZG88i8oir4qZeUr ， -LPjmsYuscg0ceMTMriM ）現在是一個索引0 ， 1 。

如果我想得到這個怎么辦：

[
  {
    "0": {
      "keys": "-LPjfZG88i8oir4qZeUr",
      "description": "Tasty & Spicy",
      "menuName": "Chicken Spicy",
      "menuPrice": "15000"
    },
    "1": {
      "keys": "-LPjmsYuscg0ceMTMriM",
      "description": "Delicious",
      "menuName": "Sweet Chicken",
      "menuPrice": "17000"
    }
  }
]

感謝您的幫助。

Answer 1

您可以使用Object.entries()獲得鍵和值。

現在，您的問題的輸入實際上就是一個具有一個對象的數組。 我想您知道如何訪問該數組中的對象（例如array[0] ），因此問題實際上是如何處理該對象。 我將忽略似乎與您的問題無關的數組包裝器。

其次，您所需的輸出也有點過大：內部對象具有數字鍵，這確實是數組提供的功能，因此在我看來，您並不需要將此類對象包裝在數組中：只需將其包裝成數組即可。

這是使用ES6代碼進行基本操作的方式：

 const obj = { "-LPjfZG88i8oir4qZeUr": { "description": "Tasty & Spicy", "menuName": "Chicken Spicy", "menuPrice": "15000" }, "-LPjmsYuscg0ceMTMriM": { "description": "Delicious", "menuName": "Sweet Chicken", "menuPrice": "17000" } }; const result = Object.entries(obj).map(([key, value]) => ({key, ...value})); console.log(result); 

上面的代碼使用了幾種ES6功能，這些功能在您的環境中可能不可用：不總是支持Object.entries和對象常量的傳播語法。

這是對ES6兼容性要求較少的代碼：

 const obj = { "-LPjfZG88i8oir4qZeUr": { "description": "Tasty & Spicy", "menuName": "Chicken Spicy", "menuPrice": "15000" }, "-LPjmsYuscg0ceMTMriM": { "description": "Delicious", "menuName": "Sweet Chicken", "menuPrice": "17000" } }; const result = Object.keys(obj).map(key => Object.assign({key: key}, obj[key])); console.log(result); 

Answer 2

您可以使用forEach遍歷數組，並獲取每個對象的鍵和值。

let data = [
  {
    "-LPjfZG88i8oir4qZeUr": {
      "description": "Tasty & Spicy",
      "menuName": "Chicken Spicy",
      "menuPrice": "15000"
    },
    "-LPjmsYuscg0ceMTMriM": {
      "description": "Delicious",
      "menuName": "Sweet Chicken",
      "menuPrice": "17000"
    }
  }
]

data.forEach((obj)=>{ 
  Object.keys(obj).forEach((key,index)=>{
    console.log('key:'key,'value:',obj[key]);
  })     
})