filter.json ✨

filter.json : Filter Your API Data From Your Schema

Contents

• Notes
• Usage
• Test
• Babel
• Hook

Why filter.json

• Front-end to render data depends json data returned by the remote interface, of course, the value will be returned in accordance with the interface data format, exp. api.user.name 。
• But unavoidable changes in the interface data or due to improper handling of back office staff to return to the non-conforming data interface.
• If the background user data field returns null / '' / [], if you use ejs or other template engine will cause the page Ben collapse, if it is in a production environment, it will cause great losses.
• filter.json born to do this, it will follow the model of the remote interface data structure of the data requested strict filtering, the data field does not conform to the agreement will be replaced by their corresponding data types.
• Even if the interface changes, or changing data types other causes, to ensure the normal rendering of the front page.

Usage

Add filter.json to your project

$ npm install filter.json --save

Your package.json will then look like this:

{
  "name": "awesome-package",
  "dependencies": {
    "filter.json": "^0.1.0"
  }
}

Create your preset Schema

Create a object named schema in the js file or any other ways:

const awesomeSchema = {
	error: 0,
	sCache: 1,
	data: {
		setup: { title: {}},
		catalog: {},
		top: {
			mixed: [],
			basic: [],
		},
	},
	message: '获取数据成功',
};

filter

Get remote api json data

const apiData = await request.get/post('http://test.com/api/xxx')

the apiData interface json must be the same as the awesomeSchema

Import and Run

• es6 using

Itself dependent babel > 6 , so when using the built- babel project version should also use > 6 version , or it may be a low version of babel conflict and cause unexpected errors

import filterJson from 'filter.json';
const bkFilterData = filterJson(awesomeSchema, { type: 'object', api: apiData, schema: awesomeSchema });

• es5 using

var filterJson = require('filter.json');
const bkFilterData = filterJson.default(awesomeSchema, { type: 'object', api: apiData, schema: awesomeSchema });

bkFilterData will be reorganized in strict accordance with the predefined Schema, even if the api json data of a field key is changed, it will be assigned according to the Schema of the pre setting.

here is the api data json, do not same with Schema

const apiData = {
	error: null,
	sCache: 1,
	data: {
		setup: null,
		catalog: {},
		top: {
			mixed: {},
			basic: null,
		},
	},
	message: 'msg ok',
};

and the result will be

{
    error: 0,
    sCache: 1,
    data: {
	    setup: { title: {}},,
	    catalog: {},
	    top: {
		    mixed: {},
		    basic: [],
	    },
    },
    message: 'msg ok'
};

you can see the filed error, setup, basic will be restored by predefined Schema. If you execute apiData.data.top.basic.map have no error. or it will throw an error.

Notes

• the predefined Schema suggest Array is the lowest js type

top: { basic : []}

• but also defined like this

top: { basic: [{},{}]}

• if the basic field is null, the filter return data will be basic: [{},{}]

Test

• configuration for ava es6

"ava": {
    "files": [
      "test/*.js"
    ],
    "concurrency": 5,
    "failFast": true,
    "tap": true,
    "powerAssert": false,
    "require": "babel-core/register"
  }

"require": "babel-core/register" is important, so you must execute install babel-core.

Babel

{
  "presets": [
	"es2015",
	"stage-0"
  ],
  "plugins": [
	"transform-runtime"
  ],
  "env": {
	"development": {
	  "sourceMaps": "inline"
	}
  }
}

use preset babel-preset-es2015 and babel-preset-stage-0 use plugin babel-plugin-transform-runtime . you can read more docs from transform-runtime and CN generate sourceMaps in development env

Hook

"scripts": {
    "test": "ava",
    "build": "babel index.js src -d dist"
  }

FAQ

Links

• Awesome list
• JavaScript Air podcast episode