Adds object/toKeyValuePairs

Adds a pipe that transforms objects to an array of key-value pairs.

Author: martyn-v

README.md

@@ -126,6 +126,7 @@ You can find the documentations in the [`docs`](./docs) folder or on [`GitBook`]
 - [`keys`](./docs/object.md#keys)
 - [`toArray`](./docs/object.md#toarray)
 - [`defaults`](./docs/object.md#defaults)
+- [`toKeyValuePairs`](./docs/object.md#tokeyvaluepairs)
 
 ## Install
 

docs/object.md

@@ -3,6 +3,7 @@
 - [`keys`](#keys)
 - [`toArray`](#toarray)
 - [`defaults`](#defaults)
+- [`toKeyValuePairs`](#tokeyvaluepairs)
 
 You can check the module import [`here`](./modules.md).
 
@@ -93,3 +94,28 @@ const array = [{ a: 2 }, null, { b: 3 }, undefined];
 {{ array | defaults: d }}
 <!-- [{ a: 2, b: 2, c: 3 }, { a: 1, b: 2, c: 3 }, { a: 1, b: 3, c: 3 }, { a: 1, b: 2, c: 3 }]-->
 ```
+
+#### toKeyValuePairs
+
+Transforms an object to an array of key-value pairs.
+
+##### File
+
+```typescript
+import { NgToKeyValuePairsModule } from 'angular-pipes';
+```
+
+##### Usage
+
+```javascript
+const value = {
+  a: 1,
+  b: 2,
+  c: 3,
+};
+```
+
+```html
+{{ object | toKeyValuePairs }}
+<!-- [{key: 'a', value: 1}, {key: 'b', value: 2}, {key: 'c', value: 3}] -->
+```

src/object/object.module.ts

@@ -3,8 +3,10 @@ import { NgModule } from '@angular/core';
 import { NgKeysPipeModule } from './keys.pipe';
 import { NgToArrayPipeModule } from './to-array.pipe';
 import { NgDefaultsPipeModule } from './defaults.pipe';
+import { NgToKeyValuePairsPipeModule } from './to-key-value-pairs';
 
 @NgModule({
-  imports: [NgKeysPipeModule, NgToArrayPipeModule, NgDefaultsPipeModule],
+  imports: [NgKeysPipeModule, NgToArrayPipeModule, NgDefaultsPipeModule, NgToKeyValuePairsPipeModule],
 })
-export class NgObjectPipesModule {}
+export class NgObjectPipesModule {
+}

src/object/to-key-value-pairs.spec.ts

@@ -0,0 +1,25 @@
+import { ToKeyValuePairsPipe } from './to-key-value-pairs';
+
+describe('ToKeyValuePairsPipe', () => {
+  let pipe: ToKeyValuePairsPipe;
+
+  beforeEach(() => {
+    pipe = new ToKeyValuePairsPipe();
+  });
+
+  const value = {
+    a: 1,
+    b: 2,
+    c: 3,
+  };
+
+  it('should transform the object to an array of KVPs', () => {
+    expect(pipe.transform(value)).toEqual([
+      { key: 'a', value: 1 }, { key: 'b', value: 2 }, { key: 'c', value: 3 },
+    ]);
+  });
+
+  it('should return non-object input unchanged', () => {
+    expect(pipe.transform('input')).toEqual('input');
+  });
+});

src/object/to-key-value-pairs.ts

@@ -0,0 +1,28 @@
+import { NgModule, Pipe, PipeTransform } from '@angular/core';
+import { isObject } from '../utils/utils';
+
+/**
+ * @description Transforms an object to an array of key/value pairs,
+ * returns the input unchanged when not of type object.
+ */
+@Pipe({ name: 'toKeyValuePairs' })
+export class ToKeyValuePairsPipe implements PipeTransform {
+  transform(input: any): any {
+
+    // Any input not of type object is returned un-mutated.
+    if (!isObject(input)) {
+      return input;
+    }
+
+    // Get the array of key/values of the object and transform into an array of KVPs
+    return Object.entries(input).map(element => ({ key: element[0], value: element[1] }));
+  }
+
+}
+
+@NgModule({
+  declarations: [ToKeyValuePairsPipe],
+  exports: [ToKeyValuePairsPipe],
+})
+export class NgToKeyValuePairsPipeModule {
+}

src/public_api.ts

@@ -74,6 +74,7 @@ export * from './math/ordinal.pipe';
 export * from './object/keys.pipe';
 export * from './object/to-array.pipe';
 export * from './object/defaults.pipe';
+export * from './object/to-key-value-pairs';
 
 export * from './string/left-pad.pipe';
 export * from './string/match.pipe';