CODEWITHSUNDEEP
javascriptjqueryjson
gezer4000
gezer4000

Reputation: 101

JSON problems and implementing some existing JavaScript into this mess

JSON HERE: http://fooda.website/data_smaller.json

Desperately trying to turn this JSON into a table in HTML but also allow me to pick the specific objects that I want (some of the arrays have objects that are not needed in the final markup).

used code from here with 'jput' :Parsing JSON objects for HTML table

not sure if the problem lies with JSON or with the code, but nothing displays when i load page.

here is my code: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="jquery-1.12.3.min.js" type="text/javascript"></script>
<script src="jput.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<script>
$(document).ready(function(){

var json = [];
//while running this code the template will be appended in your div with json data
$("#tbody").jPut({
    jsonData:json,
    ajax_url:"data_smaller.json",
    name:"tbody_template",
});

});
</script>   

<table jput="t_template">
 <tbody jput="tbody_template">
     <tr>
         <td>{{First Name}}</td>
         <td>{{Middle Name}}</td>
     </tr>
 </tbody>
</table>

<table>
 <tbody id="tbody">
 </tbody>
</table>

<script src="jquery.min.js"></script>
<script src="jput.min.js"></script>

</body>
</html>

Only want the code to display one result, but also have a button that finds a random array and displays it. Final product is button that when pressed finds random array and displays specific objects only.

Been through every SO post imaginable, but my lack of knowledge has really made things hard, so getting pretty desperate now.

help!

and thank you... this community is amazing.

Upvotes: 1

Views: 72

Answers (2)

Karpak
Karpak

Reputation: 1927

The json that you receive from the URL seems to be wrong and 'body' tag is missing. You can validate the json through some of the online validator.

JSON Validator: http://jsonlint.com/

The following code is enough

$("#tbody").jPut({ ajax_url:"http://fooda.website/data_smaller.json", prepend:true, name:"tbody_template", });

when you use url, no need to use 'var json' and jsonData:json. jPut library automatically takes the json from the Ajax url.

Upvotes: 0

vcamargo
vcamargo

Reputation: 490

First, your JSON is not valid, try JSONLint to look for errors.

Upvotes: 1

Related Questions