Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Using sprintf like syntax to format the html output. #21

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Using sprintf like syntax to format the html output. #21

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b1609e9
json2html + sprintf
asolis Jul 23, 2016
80a91f1
Readme with sprintf
asolis Jul 23, 2016
fd7ed8e
no message
asolis Jul 23, 2016
05bfb1a
modified key_access to accept indices as name.
asolis Aug 8, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 5 additions & 4 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
json2html core
json2html + sprintf core
=========

Readme First!
Expand All @@ -21,27 +21,28 @@ Instead of writing HTML templates json2html relies on JSON transforms to convert
+ Short hand notation for mapping data objects to markup ${name}
+ Event binding to DOM objects (with the jquery plugin)
+ Use of inline functions to allow for complex logic during transformation
+ Use of sprintf like syntax to format the data values

Example
--------------
Transform (template)
```javascript
var transform =
{"<>": "li", "id":"${id}", "html":[
{"<>": "span", "html": "${name} (${year})"}
{"<>": "span", "html": "${name} (${year}) ${salary}.2f"}
]};
```
Plus JSON Data
```javascript
var data =
{"id": 1123, "name": "Jack and Jill", "year":2001};
{"id": 1123, "name": "Jack and Jill", "year":2001, "salary":50000.99999};
```

Will render the following html

```html
<li id="1123">
<span>Jack and Jill (2001)</span>
<span>Jack and Jill (2001) 500000.99</span>
</li>
```

Expand Down
24 changes: 23 additions & 1 deletion examples/default.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,9 @@
<head>
<title> json2html examples </title>

<!-- Add JSON2HTML -->
<!-- Add JSON2HTML and sprintf dependency-->
<script type="text/javascript" src="../json2html.js"></script>
<script type="text/javascript" src="../sprintf.js"></script>

</head>
<body>
Expand All @@ -14,3 +15,24 @@
<script type="text/javascript" src="example.escape.js"></script>
</body>
</html>

(function() {
//Test the handling of quoted strings
var test_data = {"test1":"'single-quoted'", "test2":"\"double-quoted\""};
var test_data2 = {"test1":"<b>escape HTML test</b>", "test2":"<b>escape HTML test</b>"};

var transform = [
{"<>":"input", "html":"", "value":"${test1}"},
{"<>":"input", "html":"", "value":"${test2}"},
{"<>":"textarea", "html":"${test1}"},
{"<>":"textarea", "html":"${test2}"},
];


var html = json2html.transform(test_data, transform);
var html2 = json2html.transform(test_data2, transform);

document.write('<h1>Escape Quotes Test</h1>'+ html);
document.write('<h1>Escape HTML Test</h1>'+ html2);

})();
103 changes: 5 additions & 98 deletions json2html.js
100644 → 100755
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
//Copyright (c) 2016 Crystalline Technologies
// Original work Copyright (c) 2016 Crystalline Technologies
// Modified work Copyright (c) 2016 Andrés Solís Montero (www.solism.ca)
//
//
// Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the 'Software'),
// to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
Expand Down Expand Up @@ -275,111 +277,16 @@ var json2html = {

var val = transform[key];
var type = typeof val;

if (type === 'function') {
return(val.call(obj,obj,index));
} else if (type === 'string') {
var _tokenizer = new json2html._tokenizer([
/\$\{([^\}\{]+)\}/
],function( src, real, re ){
return real ? src.replace(re,function(all,name){

//Split the string into it's seperate components
var components = name.split('.');

//Set the object we use to query for this name to be the original object
var useObj = obj;

//Output value
var outVal = '';

//Parse the object components
var c_len = components.length;
for (var i=0;i<c_len;++i) {

if( components[i].length > 0 ) {

var newObj = useObj[components[i]];
useObj = newObj;
if(useObj === null || useObj === undefined) break;
}
}

//As long as we have an object to use then set the out
if(useObj !== null && useObj !== undefined) outVal = useObj;

return(outVal);
}) : src;
});

out = _tokenizer.parse(val).join('');
out = sprintf(val,obj);
} else {
out = val;
}

return(out);
},

//Tokenizer
'_tokenizer':function( tokenizers, doBuild ){

if( !(this instanceof json2html._tokenizer ) )
return new json2html._tokenizer( tokenizers, doBuild );

this.tokenizers = tokenizers.splice ? tokenizers : [tokenizers];
if( doBuild )
this.doBuild = doBuild;

this.parse = function( src ){
this.src = src;
this.ended = false;
this.tokens = [ ];
do {
this.next();
} while( !this.ended );
return this.tokens;
};

this.build = function( src, real ){
if( src )
this.tokens.push(
!this.doBuild ? src :
this.doBuild(src,real,this.tkn)
);
};

this.next = function(){
var self = this,
plain;

self.findMin();
plain = self.src.slice(0, self.min);

self.build( plain, false );

self.src = self.src.slice(self.min).replace(self.tkn,function( all ){
self.build(all, true);
return '';
});

if( !self.src )
self.ended = true;
};

this.findMin = function(){
var self = this, i=0, tkn, idx;
self.min = -1;
self.tkn = '';

while(( tkn = self.tokenizers[i++]) !== undefined ){
idx = self.src[tkn.test?'search':'indexOf'](tkn);
if( idx != -1 && (self.min == -1 || idx < self.min )){
self.tkn = tkn;
self.min = idx;
}
}
if( self.min == -1 )
self.min = self.src.length;
};
}
};
Loading