Object.keys(Object).map()不返回键

Question

我正在创建一个Ionic项目。

我有一个来自火球基地的节点"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]);
})     
})