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

您可以使用#MyViewerDiv {visibility: hidden;}遍历数组，并获取每个对象的键和值。

forEach

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

2 个答案: