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

Question

I'm trying to gather all errors in an err object and populate them into this.errors in order to display them.

err object :

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

As you can see, err is an object where the values of individual keys are arrays of strings. To gather the error strings into a separate this.errors array, I could simply perform:

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

But I will need to repeat these lines of code in many places of my app.

I want to place these code in a functionl as:

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

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

OR

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

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

and display them in my template:

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

What might the function look like?

Answer 1

You can use a 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) 

We're combining Object.keys a native function that allow you to obtain the keys of an object with map and reduce .

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

The map method creates a new array with the results of calling a function for every array element. So, I am returning the value of the property itself.

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

The reduce method reduces the array to a single value. So I am concatenating all the values in a single array.

Answer 2

You can use the map function coupled with a loop over the properties :

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