{"id":24358671,"url":"https://github.com/dayitv89/react-native-jsmodel","last_synced_at":"2025-04-10T05:45:28.812Z","repository":{"id":57337916,"uuid":"84451156","full_name":"dayitv89/react-native-jsmodel","owner":"dayitv89","description":"Javascript JSON model as same as JSONModel or ObjectMapper in iOS. JSON object mapping in JS.","archived":false,"fork":false,"pushed_at":"2019-01-25T14:10:52.000Z","size":144,"stargazers_count":8,"open_issues_count":0,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-24T06:54:45.273Z","etag":null,"topics":["javascript","mapper","model","react-native"],"latest_commit_sha":null,"homepage":null,"language":"Objective-C","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dayitv89.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-03-09T14:28:40.000Z","updated_at":"2020-04-12T09:07:36.000Z","dependencies_parsed_at":"2022-09-10T02:53:19.134Z","dependency_job_id":null,"html_url":"https://github.com/dayitv89/react-native-jsmodel","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dayitv89%2Freact-native-jsmodel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dayitv89%2Freact-native-jsmodel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dayitv89%2Freact-native-jsmodel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dayitv89%2Freact-native-jsmodel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dayitv89","download_url":"https://codeload.github.com/dayitv89/react-native-jsmodel/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248166881,"owners_count":21058479,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","mapper","model","react-native"],"created_at":"2025-01-18T20:21:04.947Z","updated_at":"2025-04-10T05:45:28.782Z","avatar_url":"https://github.com/dayitv89.png","language":"Objective-C","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-jsmodel: JSModel\n\n![version](https://img.shields.io/badge/version-0.0.6-green.svg)\n\n### Preface\n\nAre you coming from iOS native development background, newbies to JavaScript \u0026 react-native.\nThinking of model based approach for development, and missing [`JSONModel`](https://github.com/jsonmodel/jsonmodel)(Objective-C) and [`ObjectMapper`](https://github.com/Hearst-DD/ObjectMapper)(swift).\nThis approach is quite same as them or even more better. No need to add more dynamic keys.\n\n### Features\n\n- No need to add keys in name.\n- No need to implement nested child unless until you would interested to implement some methods on that child element.\n- keyMapper to rename the field names.\n- ease to implement and use.\n\n### Installation\n\n- Run this command `$ npm install react-native-jsmodel --save`\n\n### Implementation\n\n- import in js file as `import JSModel from 'react-native-jsmodel';` [see example](https://github.com/dayitv89/react-native-jsmodel/blob/master/RNTestJSModel/MockModel.js)\n\n```JavaScript\nimport JSModel from 'react-native-jsmodel';\n\nexport default class MockModel extends JSModel {\n\tmessage() {\n\t\treturn 'This message added by JSModel: ' + this.errorMessage;\n\t}\n}\n```\n\n- Make object of your model as `const model = new MockModel(Mock);` [see example](https://github.com/dayitv89/react-native-jsmodel/blob/master/RNTestJSModel/index.ios.js#L14)\n\n```JavaScript\nimport React from 'react';\nimport { AppRegistry, StyleSheet, Text, View } from 'react-native';\nimport MockModel from './MockModel';\nimport Mock from './Mock.json';\n\nexport default class TestJSModel extends React.Component {\n\trender() {\n\t\tconst model = new MockModel(Mock);\n\t\treturn (\n\t\t\t\u003cView style={styles.container}\u003e\n\t\t\t\t\u003cText style={styles.welcome}\u003e\n\t\t\t\t\t{model.message()}\n\t\t\t\t\u003c/Text\u003e\n\t\t\t\u003c/View\u003e\n\t\t);\n\t}\n}\nconst styles = StyleSheet.create({\n\tcontainer: {\n\t\tflex: 1,\n\t\tjustifyContent: 'center',\n\t\talignItems: 'center',\n\t\tbackgroundColor: '#F5FCFF'\n\t},\n\twelcome: {\n\t\tfontSize: 20,\n\t\ttextAlign: 'center',\n\t\tmargin: 10\n\t}\n});\n\nAppRegistry.registerComponent('TestJSModel', () =\u003e TestJSModel);\n```\n\n##### In detail:\n\n- Must inherit root object from `JSModel`. e.g. `class Parent extends JSONModel`.\n- Just inherit all models from `JSModel` that need to implement some methods, otherwise no need to create class. e.g. `common` \u0026 `root` is implemented but `orignal` is not implemented.\n- In parent model add child object as below.\n\n```js\nconstructor(json) {\n    super(json);\n    if (this.validate(json)) {\n      this.common = eval('new Common(json.common)');\n      this.root = new Root(json.root);\n    }\n}\n```\n\n### [Demo Code](demo/DemoJSModel.js)\n\n```js\nconst json = {\n\tname: 'Level 1',\n\tage: 12,\n\tcommon: {\n\t\tname: 'Level 2',\n\t\tage: 19,\n\t\tnew_name: 'key name to change',\n\t\tupdate_key: 'update data'\n\t},\n\torignal: {\n\t\tname: 'Orignal Name'\n\t},\n\troot: {\n\t\trootKey: 'L2: rootValue'\n\t}\n};\n\nconst modelObj = new Parent(json);\nmodelObj.print();\nmodelObj.common.show();\nconsole.log(modelObj.common.name);\nconsole.log(JSON.stringify(modelObj, null, 2));\n```\n\n### Implementation by bare minimum changes using `keyMapper`\n\n```js\nconst json = {\n\tfirst_name: 'James',\n\tlast_name: 'Bond'\n};\n\nexport default class MockModel extends JSModel {\n\tconstructor(json) {\n\t\tsuper(json);\n\t\tif (this.validate(json)) {\n\t\t\tthis.keyMapper({ first_name: 'firstName', last_name: 'lastName' });\n\t\t}\n\t}\n\n\tname() {\n\t\treturn this.firstName + ' ' + this.lastName;\n\t}\n}\n\nconst modelObj = new MockModel(json);\nconsole.log(modelObj.firstName); // James\nconsole.log(modelObj.name()); // James Bond\nconsole.log(modelObj.first_name); // undefined\nconsole.log(modelObj.toJSON()); // {\"first_name\":\"James\",\"last_name\":\"Bond\"}\n```\n\nTo test this demo code run: `$ npm i \u0026\u0026 npm start`\n\n### Implementation (recommend)\n\n```js\nconst json = {\n\tfirst_name: 'James',\n\tlast_name: 'Bond',\n\taddress: [\n\t\t{\n\t\t\tname: 'home',\n\t\t\tlane: '22/A',\n\t\t\tstreet: 'Bake Street',\n\t\t\tlandmark: 'Near Hey NY restaurant',\n\t\t\tcity: 'London'\n\t\t},\n\t\t{\n\t\t\tname: 'office',\n\t\t\tlane: '3rd Floor',\n\t\t\tstreet: 'Eye HeadRoom',\n\t\t\tlandmark: 'Near Denmark Hotel',\n\t\t\tcity: 'London'\n\t\t}\n\t]\n};\n\nclass AddressModel extends JSModel {\n\tconstructor(json) {\n\t\tsuper();\n\t\tif (this.validate(json)) {\n\t\t\tthis.name = json.name;\n\t\t\tthis.lane = json.lane;\n\t\t\tthis.street = json.street;\n\t\t\tthis.landmark = json.landmark;\n\t\t\tthis.city = json.city;\n\t\t}\n\t}\n\n\tisNames(k: string): boolean {\n\t\treturn this.name == k;\n\t}\n}\n\nclass UserModel extends JSModel {\n\tconstructor(json) {\n\t\tsuper();\n\t\tif (this.validate(json)) {\n\t\t\tthis.firstName = json.first_name;\n\t\t\tthis.lastName = json.last_name;\n\t\t\tthis.address = json.address.map(i =\u003e new AddressModel(i));\n\t\t}\n\t}\n\n\tname() {\n\t\treturn this.firstName + ' ' + this.lastName;\n\t}\n\n\tfindAddressByName(name: string = 'home'): Array {\n\t\treturn this.address.filter(i =\u003e i.isNames(name));\n\t}\n}\n\nconst user = new UserModel(json);\nconsole.log(user.firstName); // James\nconsole.log(user.name()); // James Bond\nconsole.log(user.first_name); // undefined\nconsole.log(user.toJSON()); // {\"first_name\":\"James\",\"last_name\":\"Bond\"}\nconsole.log(user.findAddressByName('home')); // {name: \"home\", lane: \"22/A\", street: \"Bake Street\", landmark: \"Near Hey NY restaurant\", city: \"London\"}\n```\n\n### Checklist\n\n- [x] Basic model\n- [x] Object Cloning\n- [x] keyMapper\n- [x] toJSON converted all data as JSON string\n- [x] Array parsing can possible as `json.arr.map(i =\u003e new ExtendsFromJSModel(i))`;\n- [x] Object parsing as `new ExtendsFromJSModel(json)`\n- [x] Example added\n- [ ] Advance Model with type check using `prop-types`\n- [ ] Test cases for model (jest/mocha/ ** or something better**)\n- [ ] travis-ci setup\n\n### Feedbacks\n\n- I love to hear your valuable feedbacks, suggestions \u0026 issues. Please raise a issue on the repo or email me (as subject: 'jsmodel#issue \u0026lt;topic\u0026gt;') @ `er.gauravds@gmail.com`.\n\n❤️ Voila! Happy coding...\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdayitv89%2Freact-native-jsmodel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdayitv89%2Freact-native-jsmodel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdayitv89%2Freact-native-jsmodel/lists"}