如何从一个对象创建一个字符串数组，其中各个键的值是单独的字符串数组？

Question

我试图将所有错误收集到一个err对象中，并将其填充到this.errors中以显示它们。

err对象 ：

err = {
  "name": [
    "Item name is required.",
    "Item name must be at least 4 chars"
  ],
  "rate": [
    "Item Rate is should be a number.",
    "Item rate should be between 10 and 1000"
  ],
  "category": ["Item Category is required"]
}

如您所见，err是一个对象，其中各个键的值是字符串数组。 要将错误字符串收集到单独的this.errors数组中，我可以简单地执行以下操作：

 if (err && err.number)  {
   err.number.forEach(e => {
     this.errors.push(e);
   });
 }

if (err && err.number)  {
   err.rate.forEach(e => {
     this.errors.push(e);
   });
 }

 if (err && err.number)  {
   err.category.forEach(e => {
     this.errors.push(e);
   });
 }

但是我需要在我的应用程序的许多地方重复这些代码行。

我想将这些代码放在如下的functionl中：

populateErrors(err) {
    err.forEach(error => {
          this.errors.push(error);
    });
}

// and call it
this.populateErrors(err);

要么

populateErrors(err, keys[]) {
    err.forEach(error => {
          this.errors.push(err.keys[1]);
    });
    //...
}

// and call it
populateErrors(err, ['name', 'rate', 'category'])

并将它们显示在我的模板中：

<div class="row" *ngIf="errors && errors.length">
    <div class="col-md-12">
        <div class="alert alert-danger alert-dismissible">
                <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                <ol *ngFor="let err of errMsg">
                    <li>{{ err }}</li>
                </ol>
        </div>
    </div>
</div>

该函数是什么样的？

Answer 1

您可以使用map reduce 。

 const err = { "name": [ "Item name is required.", "Item name must be at least 4 chars" ], "rate": [ "Item Rate is should be a number.", "Item rate should be between 10 and 1000" ], "category": ["Item Category is required"] } const arr = Object.keys(err) .map(k => err[k]) .reduce((acumm, el) => acumm.concat(el), []); console.log(arr) 

我们将Object.keys组合成一个本机函数，使您可以使用map和reduce来获取对象的键。

["name", "rate", "category"].map(...

map方法创建一个新数组，并为每个数组元素调用一个函数。 因此，我将返回属性本身的值。

[[ "Item name...", "Item name..." ], ["Item Rate...", "Item rate"], ["Item Category..."]].reduce(...

reduce方法将数组reduce为单个值。 所以我将所有值串联在一个数组中。

Answer 2

您可以将map函数与属性循环结合使用：

for (let prop in this.err) {
    this.errors = this.errors.join(
        this.err[prop].map(el => ({el}));
    );
}