Skip to content

Commit

Permalink
Fixed missing tbody bugs and change testcase.
Browse files Browse the repository at this point in the history
  • Loading branch information
@jongha
jongha committed Mar 17, 2014
1 parent 3b3b6b6 commit bb78fb8
Show file tree
Hide file tree
Showing 4 changed files with 226 additions and 137 deletions.
100 changes: 59 additions & 41 deletions demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,47 +16,65 @@
<div id="jsontotable-obj" class="jsontotable"></div>
<div id="jsontotable-str" class="jsontotable"></div>
</div>
<script type="text/javascript" src="../libs/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="../src/jquery.jsontotable.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var arr = [
[1, 2, 3],
[1, 2, 3]
];
$.jsontotable(arr, { id: "#jsontotable-arr", header: false });

var obj = [
{"Title1": "Hello", "Title2": "Fine", "Title3": "Thank you"},
{"Title1": "Hello", "Title2": "Fine", "Title3": "Thank you"},
{"Title1": "Hello", "Title2": "Fine", "Title3": "Thank you"},
{"Title1": "Hello", "Title2": "Fine", "Title3": "Thank you"},
{"Title1": "Hello", "Title2": "Fine", "Title3": "Thank you"},
{"Title1": "Hello", "Title2": "Fine", "Title3": "Thank you"},
{"Title1": "Hello", "Title2": "Fine", "Title3": "Thank you"},
{"Title1": "Hello", "Title2": "Fine", "Title3": "Thank you"},
{"Title1": "Hello", "Title2": "Fine", "Title3": "Thank you"},
{"Title1": "Hello", "Title2": "Fine", "Title3": "Thank you"}
];
$.jsontotable(obj, { id: "#jsontotable-obj" });

var str = '[\
{"Title1": "Hello", "Title2": "Fine", "Title3": "Thank you"}, \
{"Title1": "Hello", "Title2": "Fine", "Title3": "Thank you"}, \
{"Title1": "Hello", "Title2": "Fine", "Title3": "Thank you"}, \
{"Title1": "Hello", "Title2": "Fine", "Title3": "Thank you"}, \
{"Title1": "Hello", "Title2": "Fine", "Title3": "Thank you"}, \
{"Title1": "Hello", "Title2": "Fine", "Title3": "Thank you"}, \
{"Title1": "Hello", "Title2": "Fine", "Title3": "Thank you"}, \
{"Title1": "Hello", "Title2": "Fine", "Title3": "Thank you"}, \
{"Title1": "Hello", "Title2": "Fine", "Title3": "Thank you"}, \
{"Title1": "Hello", "Title2": "Fine", "Title3": "Thank you"} \
]';
$.jsontotable(str, {
id: "#jsontotable-str",
className: "table table-hover"
<script type="text/javascript" src="../libs/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="../dist/jquery.jsontotable.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var arr = [
[1, 2, 3],
[1, 2, 3]
];

$("#jsontotable-arr").append($("<h1></h1>").html("Array To Table"));

$.jsontotable(arr, { id: "#jsontotable-arr", header: true });

$("#jsontotable-arr").append($("<h1></h1>").html("Array To Table (Without Header)"));

$.jsontotable(arr, { id: "#jsontotable-arr", header: false });


var obj = [
{"Title1": "Hello", "Title2": "Fine", "Title3": "Thank you"},
{"Title1": "Hello", "Title2": "Fine", "Title3": "Thank you"},
{"Title1": "Hello", "Title2": "Fine", "Title3": "Thank you"},
{"Title1": "Hello", "Title2": "Fine", "Title3": "Thank you"},
{"Title1": "Hello", "Title2": "Fine", "Title3": "Thank you"},
{"Title1": "Hello", "Title2": "Fine", "Title3": "Thank you"},
{"Title1": "Hello", "Title2": "Fine", "Title3": "Thank you"},
{"Title1": "Hello", "Title2": "Fine", "Title3": "Thank you"},
{"Title1": "Hello", "Title2": "Fine", "Title3": "Thank you"},
{"Title1": "Hello", "Title2": "Fine", "Title3": "Thank you"}
];

$("#jsontotable-obj").append($("<h1></h1>").html("JSON To Table (Has Header)"));

$.jsontotable(obj, { id: "#jsontotable-obj" });

$("#jsontotable-obj").append($("<h1></h1>").html("JSON To Table (Without Header)"));

$.jsontotable(obj, { id: "#jsontotable-obj", header: false });

var str = '[\
{"Title1": "Hello", "Title2": "Fine", "Title3": "Thank you"}, \
{"Title1": "Hello", "Title2": "Fine", "Title3": "Thank you"}, \
{"Title1": "Hello", "Title2": "Fine", "Title3": "Thank you"}, \
{"Title1": "Hello", "Title2": "Fine", "Title3": "Thank you"}, \
{"Title1": "Hello", "Title2": "Fine", "Title3": "Thank you"}, \
{"Title1": "Hello", "Title2": "Fine", "Title3": "Thank you"}, \
{"Title1": "Hello", "Title2": "Fine", "Title3": "Thank you"}, \
{"Title1": "Hello", "Title2": "Fine", "Title3": "Thank you"}, \
{"Title1": "Hello", "Title2": "Fine", "Title3": "Thank you"}, \
{"Title1": "Hello", "Title2": "Fine", "Title3": "Thank you"} \
]';

$("#jsontotable-obj").append($("<h1></h1>").html("JSON (String Format) To Table"));

$.jsontotable(str, {
id: "#jsontotable-str",
className: "table table-hover"
});
});
});
</script>
</script>
</body>
</html>
4 changes: 2 additions & 2 deletions dist/jquery.jsontotable.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

16 changes: 11 additions & 5 deletions src/jquery.jsontotable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,15 +28,21 @@

row = $("<tr></tr>");
for(var key in rowData) {
if(typeof rowData[key] !== "function"){ /* ADDED: this wrapper to account for people bootstrapping the ECMA Array model otherwise functions get converted to strings and show up in the object list / output */
if(typeof rowData[key] !== "function") { /* ADDED: this wrapper to account for people bootstrapping the ECMA Array model otherwise functions get converted to strings and show up in the object list / output */
row.append("<" + rowTag + ">" + rowData[key] + "</" + rowTag + ">");
}
}

if(isHeader){ /* ADDED: IF/ELSE to eliminate repetitive TBODY tags for every row */
$(this).append($("<" + frameTag + "></" + frameTag + ">").append(row).append("<tbody></tbody>"));
}else{
$(this).find("tbody").append(row); //always append data rows to the first tbody tag
if(isHeader) { /* ADDED: IF/ELSE to eliminate repetitive TBODY tags for every row */
$(this).append($("<" + frameTag + "></" + frameTag + ">").append(row));

}else {
var tbody = $(this).find("tbody");
if(tbody.length === 0) {
tbody = $(this).append("<tbody></tbody>");
}

tbody.append(row); //always append data rows to the first tbody tag
}

return this;
Expand Down
243 changes: 154 additions & 89 deletions test/jquery.jsontotable_test.js
View file
Original file line number Diff line number Diff line change
@@ -1,91 +1,156 @@
(function($) {
test("Test1 for Array", function() {
var target = $("#test1");
var arr = [[1, 2, 3]];

target.empty();
$.jsontotable(arr, { id: "#test1", header: false });
equal(target.find("thead").length, 0);
equal(target.find("tbody").length, 1);
equal(target.find("tr").length, 1);
equal(target.find("td").length, 3);
equal(target.text(), arr[0].join(""));

arr = [[1, 2, 3], [1, 2, 3]];
target.empty();
$.jsontotable(arr, { id: "#test1", header: false });
equal(target.find("thead").length, 0);
equal(target.find("tbody").length, 2);
equal(target.find("tr").length, 2);
equal(target.find("td").length, 6);
equal(target.text(), arr[0].join("") + arr[1].join(""));

target.empty();
$.jsontotable(arr, { id: "#test1" });
equal(target.find("thead").length, 1);
equal(target.find("tbody").length, 2);
equal(target.find("tr").length, 3);
equal(target.find("td").length, 6);
equal(target.text(), arr[0].join("") + arr[0].join("") + arr[1].join(""));
});

test("Test2 for String", function() {
var target = $("#test2");
var str = "[[1, 2, 3]]";

target.empty();
$.jsontotable(str, { id: "#test2", header: false });
equal(target.find("thead").length, 0);
equal(target.find("tbody").length, 1);
equal(target.find("tr").length, 1);
equal(target.find("td").length, 3);
equal(target.text(), str.replace(/[\[\], ]/gi, ""));

str = "[[1, 2, 3], [1, 2, 3]]";
target.empty();
$.jsontotable(str, { id: "#test2", header: false });
equal(target.find("thead").length, 0);
equal(target.find("tbody").length, 2);
equal(target.find("tr").length, 2);
equal(target.find("td").length, 6);
equal(target.text(), str.replace(/[\[\], ]/gi, ""));

target.empty();
$.jsontotable(str, { id: "#test2" });
equal(target.find("thead").length, 1);
equal(target.find("tbody").length, 2);
equal(target.find("tr").length, 3);
equal(target.find("td").length, 6);
equal(target.find("tbody").text(), str.replace(/[\[\], ]/gi, ""));
});

test("Test3 for Dictionary", function() {
var target = $("#test3");
var str = '[{ "a": 1, "b": 2, "c": 3 }]';

target.empty();
$.jsontotable(str, { id: "#test3", header: false });
equal(target.find("thead").length, 0);
equal(target.find("tbody").length, 1);
equal(target.find("tr").length, 1);
equal(target.find("td").length, 3);
equal(target.text(), str.replace(/[\{\}\"\[\], abc:]/gi, ""));

str = '[{ "a": 1, "b": 2, "c": 3 }, { "a": 1, "b": 2, "c": 3 }]';
target.empty();
$.jsontotable(str, { id: "#test3", header: false });
equal(target.find("thead").length, 0);
equal(target.find("tbody").length, 2);
equal(target.find("tr").length, 2);
equal(target.find("td").length, 6);
equal(target.text(), str.replace(/[\{\}\"\[\], abc:]/gi, ""));

target.empty();
$.jsontotable(str, { id: "#test3" });
equal(target.find("thead").length, 1);
equal(target.find("tbody").length, 2);
equal(target.find("tr").length, 3);
equal(target.find("td").length, 6);
equal(target.find("tbody").text(), str.replace(/[\{\}\"\[\], abc:]/gi, ""));
});
test("Test1 for Array", function() {
var target = $("#test1");
var arr = [[1, 2, 3]];

target.empty();
$.jsontotable(arr, { id: "#test1", header: false });
equal(target.find("thead").length, 0);
equal(target.find("tbody").length, 1);
equal(target.find("th").length, 0);
equal(target.find("tr").length, 1);
equal(target.find("td").length, 3);
equal(target.text(), arr[0].join(""));

target.empty();
$.jsontotable(arr, { id: "#test1", header: true });
equal(target.find("thead").length, 1);
equal(target.find("tbody").length, 0);
equal(target.find("th").length, 3);
equal(target.find("tr").length, 1);
equal(target.find("td").length, 0);
equal(target.text(), arr[0].join(""));

arr = [[1, 2, 3], [1, 2, 3]];
target.empty();
$.jsontotable(arr, { id: "#test1", header: false });
equal(target.find("thead").length, 0);
equal(target.find("tbody").length, 1);
equal(target.find("th").length, 0);
equal(target.find("tr").length, 2);
equal(target.find("td").length, 6);
equal(target.text(), arr[0].join("") + arr[1].join(""));

target.empty();
$.jsontotable(arr, { id: "#test1", header: true });
equal(target.find("thead").length, 1);
equal(target.find("tbody").length, 1);
equal(target.find("th").length, 3);
equal(target.find("tr").length, 2);
equal(target.find("td").length, 3);
equal(target.text(), arr[0].join("") + arr[1].join(""));

target.empty();
$.jsontotable(arr, { id: "#test1" });
equal(target.find("thead").length, 1);
equal(target.find("tbody").length, 1);
equal(target.find("th").length, 3);
equal(target.find("tr").length, 2);
equal(target.find("td").length, 3);
equal(target.text(), arr[0].join("") + arr[1].join(""));
});

test("Test2 for String", function() {
var target = $("#test2");
var str = "[[1, 2, 3]]";

target.empty();
$.jsontotable(str, { id: "#test2", header: false });
equal(target.find("thead").length, 0);
equal(target.find("tbody").length, 1);
equal(target.find("th").length, 0);
equal(target.find("tr").length, 1);
equal(target.find("td").length, 3);
equal(target.text(), str.replace(/[\[\], ]/gi, ""));

target.empty();
$.jsontotable(str, { id: "#test2", header: true });
equal(target.find("thead").length, 1);
equal(target.find("tbody").length, 0);
equal(target.find("th").length, 3);
equal(target.find("tr").length, 1);
equal(target.find("td").length, 0);
equal(target.text(), str.replace(/[\[\], ]/gi, ""));


str = "[[1, 2, 3], [1, 2, 3]]";
target.empty();
$.jsontotable(str, { id: "#test2", header: false });
equal(target.find("thead").length, 0);
equal(target.find("tbody").length, 1);
equal(target.find("th").length, 0);
equal(target.find("tr").length, 2);
equal(target.find("td").length, 6);
equal(target.text(), str.replace(/[\[\], ]/gi, ""));

target.empty();
$.jsontotable(str, { id: "#test2", header: true });
equal(target.find("thead").length, 1);
equal(target.find("tbody").length, 1);
equal(target.find("th").length, 3);
equal(target.find("tr").length, 2);
equal(target.find("td").length, 3);
equal(target.text(), str.replace(/[\[\], ]/gi, ""));

target.empty();
$.jsontotable(str, { id: "#test2" });
equal(target.find("thead").length, 1);
equal(target.find("tbody").length, 1);
equal(target.find("th").length, 3);
equal(target.find("tr").length, 2);
equal(target.find("td").length, 3);
equal(target.text(), str.replace(/[\[\], ]/gi, ""));
});

test("Test3 for Dictionary", function() {
var target = $("#test3");
var str = '[{ "a": 1, "b": 2, "c": 3 }]';

target.empty();
$.jsontotable(str, { id: "#test3", header: false });
equal(target.find("thead").length, 0);
equal(target.find("tbody").length, 1);
equal(target.find("th").length, 0);
equal(target.find("tr").length, 1);
equal(target.find("td").length, 3);
equal(target.text(), str.replace(/[\{\}\"\[\], abc:]/gi, ""));

target.empty();
$.jsontotable(str, { id: "#test3", header: true });
equal(target.find("thead").length, 1);
equal(target.find("tbody").length, 0);
equal(target.find("th").length, 3);
equal(target.find("tr").length, 1);
equal(target.find("td").length, 0);
equal(target.text(), str.replace(/[\{\}\"\[\], abc:]/gi, ""));

str = '[{ "a": 1, "b": 2, "c": 3 }, { "a": 1, "b": 2, "c": 3 }]';

target.empty();
$.jsontotable(str, { id: "#test3", header: false });
equal(target.find("thead").length, 0);
equal(target.find("tbody").length, 1);
equal(target.find("th").length, 0);
equal(target.find("tr").length, 2);
equal(target.find("td").length, 6);
equal(target.text(), str.replace(/[\{\}\"\[\], abc:]/gi, ""));

target.empty();
$.jsontotable(str, { id: "#test3", header: true });
equal(target.find("thead").length, 1);
equal(target.find("tbody").length, 1);
equal(target.find("th").length, 3);
equal(target.find("tr").length, 2);
equal(target.find("td").length, 3);
equal(target.text(), str.replace(/[\{\}\"\[\], abc:]/gi, ""));

target.empty();
$.jsontotable(str, { id: "#test3" });
equal(target.find("thead").length, 1);
equal(target.find("tbody").length, 1);
equal(target.find("th").length, 3);
equal(target.find("tr").length, 2);
equal(target.find("td").length, 3);
equal(target.text(), str.replace(/[\{\}\"\[\], abc:]/gi, ""));
});
}(jQuery));

0 comments on commit bb78fb8

Please sign in to comment.