├── README.md
├── index.html
├── index.tsx
├── package.json
├── src
    └── app.tsx
└── style.scss


/README.md:
--------------------------------------------------------------------------------
 1 | # react-ts-jsontoarraytransform
 2 | 
 3 | ```js
 4 | import React from 'react';
 5 | 
 6 | function App() {
 7 |   const res = {
 8 |     result: {
 9 |       totalCount: 4,
10 |       items: [
11 |         {
12 |           employees: {
13 |             name: 'Akshay Patel',
14 |             id: 133
15 |           },
16 |           manager: 'Rajesh Patel'
17 |         },
18 |         {
19 |           employees: {
20 |             name: 'Panth Patel',
21 |             id: 140
22 |           },
23 |           manager: 'Rajesh Patel'
24 |         },
25 |         {
26 |           employees: {
27 |             name: 'Jemin Patel',
28 |             id: 141
29 |           },
30 |           manager: 'Rajesh Patel'
31 |         },
32 |         {
33 |           employees: {
34 |             name: 'Chirantan Patel',
35 |             id: 145
36 |           },
37 |           manager: 'Rajesh Patel'
38 |         }
39 |       ]
40 |     }
41 |   };
42 | 
43 |   interface client {
44 |     id: number;
45 |     name: string;
46 |     age: number;
47 |     avatar: string;
48 |   }
49 | 
50 |   const clientList: client[] = [];
51 |   res.result.items.map((res1: any) => {
52 |     clientList.push({
53 |       id: res1.employees.id,
54 |       name: res1.employees.name,
55 |       age: Math.random(),
56 |       avatar:
57 |         'https://www.levelaccess.com/wp-content/uploads/2017/10/Financial-Websites-icons-14-150x150.png'
58 |     });
59 |   });
60 |   return (
61 |     <div>
62 |       <div className="p-3 borderBottom">Clients</div>
63 |       <div className="">
64 |         <div className="list-group">
65 |           {clientList.map((item: client, index: number) => (
66 |             <div className="list-group-item" key={item.id}>
67 |               <img src={item.avatar} height="30" className="pr-2" />
68 |               {item.name}
69 |             </div>
70 |           ))}
71 |         </div>
72 |       </div>
73 |     </div>
74 |   );
75 | }
76 | 
77 | export default App;
78 | 
79 | ```
80 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 | <div id="root"></div>


--------------------------------------------------------------------------------
/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { render } from 'react-dom';
3 | import './style.scss';
4 | import App from './src/app';
5 | 
6 | render(<App />, document.getElementById('root'));
7 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-ts",
 3 |   "version": "0.0.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@popperjs/core": "^2.9.2",
 7 |     "@types/react": "^17.0.14",
 8 |     "@types/react-dom": "^17.0.9",
 9 |     "bootstrap": "^5.0.2",
10 |     "node-sass": "^6.0.1",
11 |     "react": "^17.0.2",
12 |     "react-bootstrap": "^1.6.1",
13 |     "react-dom": "^17.0.2"
14 |   },
15 |   "scripts": {
16 |     "start": "react-scripts-ts start",
17 |     "build": "react-scripts-ts build",
18 |     "test": "react-scripts-ts test --env=jsdom",
19 |     "eject": "react-scripts-ts eject"
20 |   },
21 |   "devDependencies": {
22 |     "react-scripts-ts": "latest"
23 |   }
24 | }


--------------------------------------------------------------------------------
/src/app.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | function App() {
 4 |   const res = {
 5 |     result: {
 6 |       totalCount: 4,
 7 |       items: [
 8 |         {
 9 |           employees: {
10 |             name: 'Akshay Patel',
11 |             id: 133
12 |           },
13 |           manager: 'Rajesh Patel'
14 |         },
15 |         {
16 |           employees: {
17 |             name: 'Panth Patel',
18 |             id: 140
19 |           },
20 |           manager: 'Rajesh Patel'
21 |         },
22 |         {
23 |           employees: {
24 |             name: 'Jemin Patel',
25 |             id: 141
26 |           },
27 |           manager: 'Rajesh Patel'
28 |         },
29 |         {
30 |           employees: {
31 |             name: 'Chirantan Patel',
32 |             id: 145
33 |           },
34 |           manager: 'Rajesh Patel'
35 |         }
36 |       ]
37 |     }
38 |   };
39 | 
40 |   interface client {
41 |     id: number;
42 |     name: string;
43 |     age: number;
44 |     avatar: string;
45 |   }
46 | 
47 |   const clientList: client[] = [];
48 |   res.result.items.map((res1: any) => {
49 |     clientList.push({
50 |       id: res1.employees.id,
51 |       name: res1.employees.name,
52 |       age: Math.random(),
53 |       avatar:
54 |         'https://www.levelaccess.com/wp-content/uploads/2017/10/Financial-Websites-icons-14-150x150.png'
55 |     });
56 |   });
57 |   return (
58 |     <div>
59 |       <div className="p-3 borderBottom">Clients</div>
60 |       <div className="">
61 |         <div className="list-group">
62 |           {clientList.map((item: client, index: number) => (
63 |             <div className="list-group-item" key={item.id}>
64 |               <img src={item.avatar} height="30" className="pr-2" />
65 |               {item.name}
66 |             </div>
67 |           ))}
68 |         </div>
69 |       </div>
70 |     </div>
71 |   );
72 | }
73 | 
74 | export default App;
75 | 


--------------------------------------------------------------------------------
/style.scss:
--------------------------------------------------------------------------------
1 | h1, p {
2 |   font-family: Lato;
3 | }


--------------------------------------------------------------------------------