sherby-nested-property
A Polymer 3 mixin to add functions to obtain a nested property of an object
sherby-nested-property
A Polymer 3 mixin to add functions to obtain a nested property of an object.
Instead of using multiples &&
to ensure that an object have a nested value, you could use the
NestedPropertyMixin
to obtain the value if defined.
const data = {
webcomponents: {
'polymer-3': {
npm: true,
modules: true,
},
'polymer-2': {
bower: true,
},
},
};
let npm;
if (data && data.webcomponents && data.webcomponents['polymer-3'] && data.webcomponents['polymer-3'].npm) {
npm = data.webcomponents['polymer-3'].npm;
}
// eslint-disable-next-line no-console
console.log(npm);
const data = {
webcomponents: {
'polymer-3': {
npm: true,
modules: true,
},
'polymer-2': {
bower: true,
},
},
};
const npm = this.getNestedPropertyOf(data, 'webcomponents.polymer-3.npm');
// eslint-disable-next-line no-console
console.log(npm);
Installation
As Polymer 3 use npm, you must use it to install this component:
npm install @sherby/sherby--nested-property
For the Polymer 2 version, use the SherbyElements/sherby-nested-property#^v1.0.0
inside your bower.json file.
bower install SherbyElements/sherby-nested-property --save
Use
Inmport the mixin
import { PolymerElement } from '@polymer/polymer/polymer-element.js';
import { SherbyNestedPropertyMixin } from '@sherby/sherby-nested-property/sherby-nested-property-mixin.js';
/* eslint-disable no-unused-vars */
/**
* @customElement
* @polymer
* @extends {PolymerElement}
* @appliesMixin SherbyNestedPropertyMixin
*/
class Polymer3Element extends SherbyNestedPropertyMixin(PolymerElement) {
// Use the getNestedProperty or the getNestedPropertyOf functions
computeData(data) {
const npm = this.getNestedPropertyOf(data, 'webcomponents.polymer-3.npm');
// eslint-disable-next-line no-console
console.log(npm);
}
}
Links
Compatibility
Was this helpful? Need more help?
Leave a comment or a question below. You can also join
the chat on Discord or
ask questions on StackOverflow.
Version
Dependencies
- Released
- 2018-05-13
- Maturity
- IMPORTED
- License
- MIT License
Compatibility
- Framework
- Browser
- Browser Independent
sherby-nested-property - Vaadin Add-on Directory
A Polymer 3 mixin to add functions to obtain a nested property of an object[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/SherbyElements/sherby-nested-property)
[![Build status](https://travis-ci.org/SherbyElements/sherby-nested-property.svg?branch=master)](https://travis-ci.org/SherbyElements/sherby-nested-property)
## sherby-nested-property
A **Polymer 3** mixin to add functions to obtain a nested property of an object.
Instead of using multiples `&&` to ensure that an object have a nested value, you could use the
`NestedPropertyMixin` to obtain the value if defined.
```javascript
const data = {
webcomponents: {
'polymer-3': {
npm: true,
modules: true,
},
'polymer-2': {
bower: true,
},
},
};
let npm;
if (data && data.webcomponents && data.webcomponents['polymer-3'] && data.webcomponents['polymer-3'].npm) {
npm = data.webcomponents['polymer-3'].npm;
}
// eslint-disable-next-line no-console
console.log(npm);
```
```javascript
const data = {
webcomponents: {
'polymer-3': {
npm: true,
modules: true,
},
'polymer-2': {
bower: true,
},
},
};
const npm = this.getNestedPropertyOf(data, 'webcomponents.polymer-3.npm');
// eslint-disable-next-line no-console
console.log(npm);
```
## Installation
As Polymer 3 use npm, you must use it to install this component:
```bash
npm install @sherby/sherby--nested-property
```
For the **Polymer 2** version, use the `SherbyElements/sherby-nested-property#^v1.0.0` inside your bower.json file.
```bash
bower install SherbyElements/sherby-nested-property --save
```
## Use
Inmport the mixin
```javascript
import { PolymerElement } from '@polymer/polymer/polymer-element.js';
import { SherbyNestedPropertyMixin } from '@sherby/sherby-nested-property/sherby-nested-property-mixin.js';
/* eslint-disable no-unused-vars */
/**
* @customElement
* @polymer
* @extends {PolymerElement}
* @appliesMixin SherbyNestedPropertyMixin
*/
class Polymer3Element extends SherbyNestedPropertyMixin(PolymerElement) {
// Use the getNestedProperty or the getNestedPropertyOf functions
computeData(data) {
const npm = this.getNestedPropertyOf(data, 'webcomponents.polymer-3.npm');
// eslint-disable-next-line no-console
console.log(npm);
}
}
```
View on NPMView on GitHub
sherby-nested-property version 2.0.0-rc.1
### Dependencies