Object.keys (object) .map () не возвращает ключи

Question

Я создаю ионный проект.

У меня есть узел "menu" из firebase, подобный этому:

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