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

Question

I am creating an Ionic project.

I have a node "menu" from firebase like this:

"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"
      }
    }
  }

I want to get the keys and values from that node and store it in a local variable menuCatLocalArr . This is my code 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 {
      }
    });
  }
}

When I console.log(this.menuCatLocalArr) , under menuContent I get this this:

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

Notice that the key ( -LPjfZG88i8oir4qZeUr , -LPjmsYuscg0ceMTMriM ) is now an index 0 , 1 .

What should I do if I want to get this instead:

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

Thanks for helping.

Answer 1

You can get both the keys and values with Object.entries() .

Now your question has an input that really is an array having one object. I suppose you know how to access the object in that array (like array[0] ), and so the question really is how to deal with that object. I will ignore the array wrapper which seems unrelated to your question.

Secondly, your desired output is also a bit overkill: the inner object has numerical keys, which is really what arrays provide, so it seems to me you don't really need to wrap such an object in an array: just make it an array.

Here is how you can do the basic operation with ES6 code:

 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); 

The above code uses several ES6 features which may not be available in your environment: Object.entries and spread syntax for object literals are not always supported.

Here is code that poses fewer ES6-compliancy requirements:

 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

You can iterate over the array using forEach and obtain keys and values for each object.

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]);
  })     
})