getjson

index.css

body {
  background-color: #F8F8F8;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.2em;
  margin: 15px;
}

h1, p, td, th, label, table {
  color: #333;
}

table {
  text-align: left;
  border-spacing: 5px 15px
}

label {
  font-weight: bold;
}

textarea {
  resize: none;
}

.result {
  background-color: Ivory;
  padding: 5px 5px 5px 5px;
  border: 1px solid black;
}

#mapAsJson {
  background-color: Ivory;
  padding: 5px 5px 5px 5px;
  margin-top: 15px;
  border: 1px solid black;
  width: 500px;
  height: 50px;
  font-size:14px;
}

table {
  text-align: left;
  border-spacing: 5px 15px
}

label {
  font-weight: bold;
}

textarea {
  resize: none;
}

index.html

<p id="outId"></p>
<img id="out_home_menu_logo" src="" />
<a id="outHomeMenuFacebookUrl">Facebook</a>
<a id="outHomeMenuInstagramUrl">Intstagram</a>
<img id="out_home_hero_bkgimage" src="" />
<p id="outHomeHeroTitle"></p>
<p id="outHomeHeroBody"></p>
<p id="outHomeHeroButtonText"></p>
<p id="outHomeHeroButtonUrl"></p>
<img id="out_home_historia_avatar" src="" />
<p id="outHomeHistoriaTitle"></p>
<p id="outHomeHistoriaBody"></p>
<img id="out_home_especialidades_avatar" src="" />
<p id="outHomeEspecialidadesTitle"></p>
<p id="outHomeEspecialidadesBody"></p>
<p id="outHomeDepoimentosTitle"></p>
<p id="outHomeEquipeTitle"></p>
<p id="outHomeEquipeBody"></p>
<img id="out_home_equipe_um_avatar" src="" />
<p id="outHomeEquipeUmName"></p>
<p id="outHomeEquipeUmBody"></p>
<img id="out_home_equipe_dois_avatar" src="" />
<p id="outHomeEquipeDoisName"></p>
<p id="outHomeEquipeDoisBody"></p>
<img id="out_home_equipe_tres_avatar" src="" />
<p id="outHomeEquipeTresName"></p>
<p id="outHomeEquipeTresBody"></p>
<p id="outHomeEspacoTitle"></p>
<p id="outHomeEspacoBody"></p>
<p id="outHomeFooterTitle"></p>
<p id="outHomeFooterTel1"></p>
<p id="outHomeFooterTel2"></p>
<p id="outHomeFooterAddress"></p>
<p id="outHomeFooterHorarioSemana"></p>
<p id="outHomeFooterHorarioFds"></p>
<iframe id="outHomeFooterMapUrl" src=""></iframe>

main.dart

import 'dart:html';
import 'dart:convert';

// Input fields
ParagraphElement id;
ImageElement home_menu_logo;
AnchorElement homeMenuFacebookUrl;
AnchorElement homeMenuInstagramUrl;
ImageElement home_hero_bkgimage;
ParagraphElement homeHeroTitle;
ParagraphElement homeHeroBody;
ParagraphElement homeHeroButtonText;
ParagraphElement homeHeroButtonUrl;
ImageElement home_historia_avatar;
ParagraphElement homeHistoriaTitle;
ParagraphElement homeHistoriaBody;
ImageElement home_especialidades_avatar;
ParagraphElement homeEspecialidadesTitle;
ParagraphElement homeEspecialidadesBody;
ParagraphElement homeDepoimentosTitle;
ParagraphElement homeEquipeTitle;
ParagraphElement homeEquipeBody;
ImageElement home_equipe_um_avatar;
ParagraphElement homeEquipeUmName;
ParagraphElement homeEquipeUmBody;
ImageElement home_equipe_dois_avatar;
ParagraphElement homeEquipeDoisName;
ParagraphElement homeEquipeDoisBody;
ImageElement home_equipe_tres_avatar;
ParagraphElement homeEquipeTresName;
ParagraphElement homeEquipeTresBody;
ParagraphElement homeEspacoTitle;
ParagraphElement homeEspacoBody;
ParagraphElement homeFooterTitle;
ParagraphElement homeFooterTel1;
ParagraphElement homeFooterTel2;
ParagraphElement homeFooterAddress;
ParagraphElement homeFooterHorarioSemana;
ParagraphElement homeFooterHorarioFds;
IFrameElement homeFooterMapUrl;

void main() {
  // Set up the input text areas.
  id = querySelector('#outId');
  home_menu_logo = querySelector('#out_home_menu_logo');
  homeMenuFacebookUrl = querySelector('#outHomeMenuFacebookUrl');
  homeMenuInstagramUrl = querySelector('#outHomeMenuInstagramUrl');
  home_hero_bkgimage = querySelector('#out_home_hero_bkgimage');
  homeHeroTitle = querySelector('#outHomeHeroTitle');
  homeHeroBody = querySelector('#outHomeHeroBody');
  homeHeroButtonText = querySelector('#outHomeHeroButtonText');
  homeHeroButtonUrl = querySelector('#outHomeHeroButtonUrl');
  home_historia_avatar = querySelector('#out_home_historia_avatar');
  homeHistoriaTitle = querySelector('#outHomeHistoriaTitle');
  homeHistoriaBody = querySelector('#outHomeHistoriaBody');
  home_especialidades_avatar = querySelector('#out_home_especialidades_avatar');
  homeEspecialidadesTitle = querySelector('#outHomeEspecialidadesTitle');
  homeEspecialidadesBody = querySelector('#outHomeEspecialidadesBody');
  homeDepoimentosTitle = querySelector('#outHomeDepoimentosTitle');
  homeEquipeTitle = querySelector('#outHomeEquipeTitle');
  homeEquipeBody = querySelector('#outHomeEquipeBody');
  home_equipe_um_avatar = querySelector('#out_home_equipe_um_avatar');
  homeEquipeUmName = querySelector('#outHomeEquipeUmName');
  homeEquipeUmBody = querySelector('#outHomeEquipeUmBody');
  home_equipe_dois_avatar = querySelector('#out_home_equipe_dois_avatar');
  homeEquipeDoisName = querySelector('#outHomeEquipeDoisName');
  homeEquipeDoisBody = querySelector('#outHomeEquipeDoisBody');
  home_equipe_tres_avatar = querySelector('#out_home_equipe_tres_avatar');
  homeEquipeTresName = querySelector('#outHomeEquipeTresName');
  homeEquipeTresBody = querySelector('#outHomeEquipeTresBody');
  homeEspacoTitle = querySelector('#outHomeEspacoTitle');
  homeEspacoBody = querySelector('#outHomeEspacoBody');
  homeFooterTitle = querySelector('#outHomeFooterTitle');
  homeFooterTel1 = querySelector('#outHomeFooterTel1');
  homeFooterTel2 = querySelector('#outHomeFooterTel2');
  homeFooterAddress = querySelector('#outHomeFooterAddress');
  homeFooterHorarioSemana = querySelector('#outHomeFooterHorarioSemana');
  homeFooterHorarioFds = querySelector('#outHomeFooterHorarioFds');
	homeFooterMapUrl = querySelector('#outHomeFooterMapUrl');

  _populateFromJson();
}

// Pre-fill the form with some default values.
void _populateFromJson() {
  final jsonDataAsString =
      '''{"id":2,"homeMenuFacebookUrl":"homeface","homeMenuInstagramUrl":"instaul","homeHeroTitle":"herotitlu","homeHeroBody":"eeoe uheosanh uteaohtshusoe","homeHeroButtonText":"hero button","homeHeroButtonUrl":"herourrl","homeHistoriaTitle":"historiatitle","homeHistoriaBody":"historiabody","homeEspecialidadesTitle":"estpe titel","homeEspecialidadesBody":"uikeuoi ioeui iuoi oeuio euioeuioeuioe","homeDepoimentosTitle":"depeoi title","homeEquipeTitle":"equipet title","homeEquipeBody":"ioeui ioe uio eioeu ioeui oeui","homeEquipeUmName":"equipeum name","homeEquipeUmBody":"uioeui iuo uio ,eui","homeEquipeDoisName":"equipe dous name","homeEquipeDoisBody":"iiuoe ioue ioeui oeui oeuioe u","homeEquipeTresName":"equiipe tres name","homeEquipeTresBody":"uhdteno utauoetnh atsunhoantue","homeEspacoTitle":"hemo estpoco titel","homeEspacoBody":"ueouhnteu hntsoehu staoheutsoheuna","homeFooterTitle":"footer titel/","homeFooterTel1":"1212112112","homeFooterTel2":"2121212121","homeFooterAddress":"rua addresss","homeFooterHorarioSemana":"aber hora","homeFooterHorarioFds":"no fis","homeFooterMapUrl":"https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3675.239264124928!2d-47.05243258441837!3d-22.904544143550687!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94c8cf484501fd85%3A0x3ee33f5fe78d5e3!2sRua+Coronel+Quirino%2C+315+-+Centro%2C+Campinas+-+SP%2C+13015-330!5e0!3m2!1spt-BR!2sbr!4v1546522444633","home_menu_logo":"/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBHUT09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--c9a871f6c9d2069c8bf68a392aaa4168945d3271/logo-footer.png","home_hero_bkgimage":"/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBHZz09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--a19a167cc63eaffdc3deae45804560851f5a7161/1%20(6).jpg","home_historia_avatar":"/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBHdz09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--aaeab505c466bedcb3c15ac270b09e8b92f75eee/foto%20cart%C3%A3o%202.jpg","home_especialidades_avatar":"/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBIQT09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--95bd4f88bc9c566fffc2a47fc53394553aa63394/1%20(10).jpg","home_equipe_um_avatar":"/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBIUT09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--055ba4a7f8d7ab496781bfac8b107b25f4124931/1%20(6).jpg","home_equipe_dois_avatar":"/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBIZz09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--1fa67ac574aacbf5ac95f952ed25e2a39365b969/foto%20escrit%C3%B3rio%201.jpg","home_equipe_tres_avatar":"/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBIdz09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--343f22b66644b7b969c5ecfef45230c0c9850b8a/1%20(6).jpg"}''';

  Map jsonData = json.decode(jsonDataAsString);

  id.text = jsonData['id'].toString();
  home_menu_logo.src = jsonData['home_menu_logo'];
  homeMenuFacebookUrl.href = jsonData['homeMenuFacebookUrl'].toString();
  homeMenuInstagramUrl.href = jsonData['homeMenuInstagramUrl'].toString();
  home_hero_bkgimage.src = jsonData['home_hero_bkgimage'];
  homeHeroTitle.text = jsonData['homeHeroTitle'].toString();
  homeHeroBody.text = jsonData['homeHeroBody'].toString();
  homeHeroButtonText.text = jsonData['homeHeroButtonText'].toString();
  homeHeroButtonUrl.text = jsonData['homeHeroButtonUrl'].toString();
  home_historia_avatar.src = jsonData['home_historia_avatar'];
  homeHistoriaTitle.text = jsonData['homeHistoriaTitle'].toString();
  homeHistoriaBody.text = jsonData['homeHistoriaBody'].toString();
  home_especialidades_avatar.src = jsonData['home_especialidades_avatar'];
  homeEspecialidadesTitle.text = jsonData['homeEspecialidadesTitle'].toString();
  homeEspecialidadesBody.text = jsonData['homeEspecialidadesBody'].toString();
  homeDepoimentosTitle.text = jsonData['homeDepoimentosTitle'].toString();
  homeEquipeTitle.text = jsonData['homeEquipeTitle'].toString();
  homeEquipeBody.text = jsonData['homeEquipeBody'].toString();
  home_equipe_um_avatar.src = jsonData['home_equipe_um_avatar'];
  homeEquipeUmName.text = jsonData['homeEquipeUmName'].toString();
  homeEquipeUmBody.text = jsonData['homeEquipeUmBody'].toString();
  home_equipe_dois_avatar.src = jsonData['home_equipe_dois_avatar'];
  homeEquipeDoisName.text = jsonData['homeEquipeDoisName'].toString();
  homeEquipeDoisBody.text = jsonData['homeEquipeDoisBody'].toString();
  home_equipe_tres_avatar.src = jsonData['home_equipe_tres_avatar'];
  homeEquipeTresName.text = jsonData['homeEquipeTresName'].toString();
  homeEquipeTresBody.text = jsonData['homeEquipeTresBody'].toString();
  homeEspacoTitle.text = jsonData['homeEspacoTitle'].toString();
  homeEspacoBody.text = jsonData['homeEspacoBody'].toString();
  homeFooterTitle.text = jsonData['homeFooterTitle'].toString();
  homeFooterTel1.text = jsonData['homeFooterTel1'].toString();
  homeFooterTel2.text = jsonData['homeFooterTel2'].toString();
  homeFooterAddress.text = jsonData['homeFooterAddress'].toString();
  homeFooterHorarioSemana.text = jsonData['homeFooterHorarioSemana'].toString();
  homeFooterHorarioFds.text = jsonData['homeFooterHorarioFds'].toString();
  homeFooterMapUrl.src = jsonData['homeFooterMapUrl'];

}

/// Display all values as JSON.
void showJson(Event _) {
  // Grab the data that will be converted to JSON.
  final outId = id.text;
  final out_home_menu_logo = home_menu_logo.src;
  final outHomeMenuFacebookUrl = homeMenuFacebookUrl.href;
  final outHomeMenuInstagramUrl = homeMenuInstagramUrl.href;
  final out_home_hero_bkgimage = home_hero_bkgimage.src;
  final outHomeHeroTitle = homeHeroTitle.text;
  final outHomeHeroBody = homeHeroBody.text;
  final outHomeHeroButtonText = homeHeroButtonText.text;
  final outHomeHeroButtonUrl = homeHeroButtonUrl.text;
  final out_home_historia_avatar = home_historia_avatar.src;
  final outHomeHistoriaTitle = homeHistoriaTitle.text;
  final outHomeHistoriaBody = homeHistoriaBody.text;
  final out_home_especialidades_avatar = home_especialidades_avatar.src;
  final outHomeEspecialidadesTitle = homeEspecialidadesTitle.text;
  final outHomeEspecialidadesBody = homeEspecialidadesBody.text;
  final outHomeDepoimentosTitle = homeDepoimentosTitle.text;
  final outHomeEquipeTitle = homeEquipeTitle.text;
  final outHomeEquipeBody = homeEquipeBody.text;
  final out_home_equipe_um_avatar = home_equipe_um_avatar.src;
  final outHomeEquipeUmName = homeEquipeUmName.text;
  final outHomeEquipeUmBody = homeEquipeUmBody.text;
  final out_home_equipe_dois_avatar = home_equipe_dois_avatar.src;
  final outHomeEquipeDoisName = homeEquipeDoisName.text;
  final outHomeEquipeDoisBody = homeEquipeDoisBody.text;
  final out_home_equipe_tres_avatar = home_equipe_tres_avatar.src;
  final outHomeEquipeTresName = homeEquipeTresName.text;
  final outHomeEquipeTresBody = homeEquipeTresBody.text;
  final outHomeEspacoTitle = homeEspacoTitle.text;
  final outHomeEspacoBody = homeEspacoBody.text;
  final outHomeFooterTitle = homeFooterTitle.text;
  final outHomeFooterTel1 = homeFooterTel1.text;
  final outHomeFooterTel2 = homeFooterTel2.text;
  final outHomeFooterAddress = homeFooterAddress.text;
  final outHomeFooterHorarioSemana = homeFooterHorarioSemana.text;
  final outHomeFooterHorarioFds = homeFooterHorarioFds.text;
  final outHomeFooterMapUrl = homeFooterMapUrl.src;


  final formData = {
    'id': id,
    'home_menu_logo': home_menu_logo,
    'homeMenuFacebookUrl': homeMenuFacebookUrl,
    'homeMenuInstagramUrl': homeMenuInstagramUrl,
    'home_hero_bkgimage': home_hero_bkgimage,
    'homeHeroTitle': homeHeroTitle,
    'homeHeroBody': homeHeroBody,
    'homeHeroButtonText': homeHeroButtonText,
    'homeHeroButtonUrl': homeHeroButtonUrl,
    'home_historia_avatar': home_historia_avatar,
    'homeHistoriaTitle': homeHistoriaTitle,
    'homeHistoriaBody': homeHistoriaBody,
    'home_especialidades_avatar': home_especialidades_avatar,
    'homeEspecialidadesTitle': homeEspecialidadesTitle,
    'homeEspecialidadesBody': homeEspecialidadesBody,
    'homeDepoimentosTitle': homeDepoimentosTitle,
    'homeEquipeTitle': homeEquipeTitle,
    'homeEquipeBody': homeEquipeBody,
    'home_equipe_um_avatar': home_equipe_um_avatar,
    'homeEquipeUmName': homeEquipeUmName,
    'homeEquipeUmBody': homeEquipeUmBody,
    'home_equipe_dois_avatar': home_equipe_dois_avatar,
    'homeEquipeDoisName': homeEquipeDoisName,
    'homeEquipeDoisBody': homeEquipeDoisBody,
    'home_equipe_tres_avatar': home_equipe_tres_avatar,
    'homeEquipeTresName': homeEquipeTresName,
    'homeEquipeTresBody': homeEquipeTresBody,
    'homeEspacoTitle': homeEspacoTitle,
    'homeEspacoBody': homeEspacoBody,
    'homeFooterTitle': homeFooterTitle,
    'homeFooterTel1': homeFooterTel1,
    'homeFooterTel2': homeFooterTel2,
    'homeFooterAddress': homeFooterAddress,
    'homeFooterHorarioSemana': homeFooterHorarioSemana,
    'homeFooterHorarioFds': homeFooterHorarioFds,
    'homeFooterMapUrl': homeFooterMapUrl
  };
}