Skip to content
abinition edited this page Sep 23, 2014 · 6 revisions

HTML as JSON

list html = 
{"menu": {
  "id": "file",
  "value": "File",
  "popup": {
    "menuitem": [
      {"value": "New", "onclick": "CreateNewDoc()"},
      {"value": "Open", "onclick": "OpenDoc()"},
      {"value": "Close", "onclick": "CloseDoc()"}
    ]
  }
}};
xdescribe html ;

...produces

<html>
  <menu>
    <id datatype="str">
      file
    </id>
    <value datatype="str">
      File
    </value>
    <popup>
      <menuitem>
        <value datatype="str">
          New
        </value>
        <onclick datatype="str">
          CreateNewDoc()
        </onclick>
      </menuitem>
      <menuitem>
        <value datatype="str">
          Open
        </value>
        <onclick datatype="str">
          OpenDoc()
        </onclick>
      </menuitem>
      <menuitem>
        <value datatype="str">
          Close
        </value>
        <onclick datatype="str">
          CloseDoc()
        </onclick>
      </menuitem>
    </popup>
  </menu>
</html>

JSON as HTML

Consider the following HTML

list html = {
  list head = {
    list title = {"A short story"},
    list meta = { attr keywords = "SHORT STORY HELLO WORLD" }
  },
  list body = {
     list div = {
        attr style="float:left",
        attr p = { "Hello world" }
     },
     list div = {
        attr mimetype="xml",
        list xmldata = {
          list aList = {"one",2,3.0,0x04,0o005 },
            str aStr = "Hello again",
            int anInt = {99,100,101},
            float aFloat = 33.33,
            hex aHex = 0x00ff00,
            octal anOctal = 0x007,
            "A literal",
            100,
            1.3e-22,
            0x12345678,
            list a = {
              list x = {1,2,3},
              list x = {4,5,5},
              list x = "Why?",
              list x = { double z = -1.2 }
           }
        }
      }
    }
} ;

str json = jsdescribe html ;
puts json ;

...produces

"html" : {"head" : {"title" : "A short story","meta" : {"keywords" : "SHORT STORY HELLO WORLD"}},"body" : {"div" : {"style" : "float:left","p" : "Hello world"},"div" : {"mimetype" : "xml","xmldata" : {"aList" : {"one",2,3,0x00000004,0o0000000005},"aStr" : "Hello again","anInt" : [99,100,101],"aFloat" : 33.33,"aHex" : 0x0000ff00,"anOctal" : 0o0000000007,"A literal",100,1.3e-22,0x12345678,"a" : {"x" : {1,2,3},"x" : {4,5,5},"x" : "Why?","x" : {"z" : -1.2}}}}}};

Then, converting that back to html...

undef html ;
*json ; 
describe html ;

...produces

list 'html' = {
  list 'head' = {
    str 'title' = {
      "A short story"
    },
    list 'meta' = {
      str 'keywords' = {
        "SHORT STORY HELLO WORLD"
      }
    }
  },
  list 'body' = {
    list 'div' = {
      str 'style' = {
        "float:left"
      },
      str 'p' = {
        "Hello world"
      }

    },
    list 'div' = {
      str 'mimetype' = {
        "xml"
      },
      list 'xmldata' = {
        list 'aList' = {
          "one",
          2,
          3,
          0x00000004,
          0o0000000005
        },
        str 'aStr' = {
          "Hello again"
        },
        list 'anInt' = {
          99
        },
        list 'anInt' = {
          100
        },
        list 'anInt' = {
          101
        },
        double 'aFloat' = {33.33},
        hex 'aHex' = {0x0000ff00},
        octal 'anOctal' = {0o0000000007},
        "A literal",
        100,
        1.3e-22,
        0x12345678,
        list 'a' = {
          list 'x' = {
            1,
            2,
            3
          },
          list 'x' = {
            4,
            5,
            5
          },
          str 'x' = {
            "Why?"
          },
          list 'x' = {
            double 'z' = {-1.2}
          }
        }
      }
    }
  }
};
Clone this wiki locally