StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>You need a good server side solution to read your files/csv and service the data to your front end - you could also use node as a solution - but both of those topics are outside of scope here (at the least, I'm probably not the best person to answer them, and the answers I give would lead to many more questions).</p> <p>to do the front end bit - you should use jQuery, because it will simplify a lot of things for you. </p> <p>if you've got your json string (probably just an array in this case) and it inflates/parses to something like this:</p> <p><strong>Parsed JSON:</strong></p> <pre><code>files = [ 'file1.html', 'file2.html', ...etc... ]; </code></pre> <p>you can push these into an <strong>empty, existing UL element</strong> as follows:</p> <p><strong>HTML:</strong></p> <pre><code><ul id="list"></ul> <div id="pageHTML"></div> </code></pre> <p><strong>Javascript/jQuery:</strong></p> <pre><code>$(document).ready(function() { var $list = $('#list'), $html = $('#pageHTML'); for(var i = 0; i < files.length; i++){ $list.append('<li><a href="/path/to/'+files[i]+'">'+files[i]+'</a></li>'); } // when a link is clicked, we can load the content via ajax $list.on('click', 'a', function(e){ e.preventDefault(); $html.load(this.href); }); }); </code></pre> <p>Jquery simplifies & makes it a lot easier to read what's going on here compared with the standard javascript version linked to in @NullPointerException's answer.</p> <p>XMLHTTPRequest is also are a very complicated field. As a new developer, there are lots of potential pitfalls along the way if you decide to "roll your own" solution. Probably a better idea to let jQuery handle the heavy lifting for you.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload