Why is thing displaying to the page with this code?

Question

My JSON is good. I've followed a very simple example from the json2html site ... nothing displays.

<script type="text/javascript">
        
$.getJSON( "news/list/category/news/format/json",  function(data) { 

 

var transforms = {
 stories: [
    {'<>':'ul','class':'stories','html':function() {
        return($.json2html(this.groups,transforms.group));
    }}
 ],
 group: [
  {"<>": "li", "id":"id", "html":[
    {"<>": "span", "html": "${AUTHOR} ${HEADLINE}"}
    ]}
 ]
};
 
$('#stories').json2html(data, transforms.stories);

})

</script>

`$.getJSON` would suggest you are using jQuery. Are you loading the library? What does your console tell you? — Turnip, Mar 28 '17 at 11:53
I'm loading the library. No errors. If I console.log( data ); there is an object with columns filled with data. — howardowens, Mar 28 '17 at 12:29
FWIW: using .getJSON with some javascript to output HTML with data works. Meaning something like this in a "test script" I set up works $.each( data, function( row ) { items.push( "

score 1 · Answer 1 · edited Aug 30 '20 at 19:46

Firstly if you could paste the actual JSON in your question that would go along way to helping figure out the issue.

This is probably where you're going wrong

stories: [
    {'<>':'ul','class':'stories','html':function() {
        return($.json2html(this.groups,transforms.group));
    }}
 ],

Let me run though how this works

First

$('#stories').json2html(data, transforms.stories);

Transforms the data object(s) into stories

stories: [
    {'<>':'ul','class':'stories','html':function() {
        return($.json2html(this.groups,transforms.group));
    }}  ],

Stories transforms the objects under the "groups" property into a group

group: [
  {"<>": "li", "id":"id", "html":[
    {"<>": "span", "html": "${AUTHOR} ${HEADLINE}"}
    ]}
 ]

Group transforms the group object into a list item with a span.

So you're json object better look something like

[{"groups":[{"AUTHOR":"Someone","HEADLINE":"Someheadline"},..]}]

Though since groups was just used as an example I would suspect your json object looks more like this (best to paste that actual JSON in your question)

[{"AUTHOR":"Someone","HEADLINE":"Someheadline"},..]

In that case just use the following code snipet should work. Keep in mind that the transform is just a representation of the html (template) that you want for each object in the JSON array from your $.getJSON

var data = [{"AUTHOR":"Someone","HEADLINE":"Someheadline"}];

var transforms = {
 story: [
  {"<>": "li", "id":"id", "html":[
    {"<>": "span", "html": "${AUTHOR} ${HEADLINE}"}
    ]}
 ]};

$("#stories").json2html(data,transforms.story);

//OR using getJSON
$.getJSON( "news/list/category/news/format/json",  function(data) { 
    $('#stories').json2html(data, transforms.story);
});

Here's the start of the JSON [{"UNIQUE_ID":249279,"HEADLINE":"Friedman plans to pursue case against child molester who had conviction on four counts thrown out","AUTHOR":"Howard B. Owens","CONTENT":"\r\r\r If necessary, District Attorney Lawrence Friedman will seek new grand jury indictments against a former Batavia resident who had his Genesee County convictions on sexual molestation charges thrown out by an appeals court. — howardowens, Mar 29 '17 at 00:55
So you're supposition about what the JSON looks like looks to be correct. Your suggested code sample, however, isn't printing results, however. — howardowens, Mar 29 '17 at 00:57
Edited the answer to include the JSON object and verified that it should run correctly (obviously with only the static data). Also make sure to check that the data object is the array you need to transform. — Chad Brown, Mar 30 '17 at 01:41

Why is thing displaying to the page with this code?

1 Answers1