JSFiddle - React, Tailwind, and code Playground

by mahny

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.6.7/axios.min.js"></script>
<div id="app">hello.</div>

JavaScript

class UserDto {
	constructor() {
  	this.id = null;
  	this.name = null;
  	this.username = null;
  	this.email = null;
  	this.address = null;
  	this.phone = null;
  	this.website = null;
  	this.company = null;
  }
  
  toEzString() {
  	return `{id: "${this.id}", name: "${this.name}"}`;
	}
}

function mapping(dtoClass, data) {
	const ret = new dtoClass();
	Object.keys(ret).forEach(key => {
  	ret[key] = data[key];
  });
  return ret;
}

(async () => {
  const res = await axios.get('https://jsonplaceholder.typicode.com/users');

  const datas = res.data.map(data => {
    return mapping(UserDto, data);
  });
  
  let msg = '';
  datas.forEach(data => {
  	msg += `${data.toEzString()}\n`;
  });
  document.getElementById('app').innerHTML = `<pre>${msg}</pre>`;
})();