Question

I have a question about loading JSONP into HTML.

This is my JSONP file:

myCallback({
"news": {
    "item": [
        {
            "Title": "IceBridge Preparations Continue",
            "Author": "George Hale, IceBridge Science Outreach Coordinator",
            "Date": "14/09/2012",
            "Intro": "The work of installing IceBridge's science instruments on the NASA DC-8 airborne laboratory continued this week.",
            "Content": "People from the Center for the Remote Sensing of Ice Sheets at the University of Kansas (CReSIS) and from Sander Geophysics Limited (SGL) spent the week installing the aircraft's various radar instruments and the AirGrav gravimeter. With the last of the instruments installed and operational, IceBridge is now ready to start test flights next week. Monday afternoon's schedule includes pilot proficiency flights and on Tuesday and Wednesday IceBridge will carry out instrument check flights."
        },
        {
            "Title": "Preparing the DC-8 for Antarctica 2012",
            "Author": "George Hale, IceBridge Science Outreach Coordinator",
            "Date": "20/09/2012",
            "Intro": "Over the next few weeks the IceBridge team will prepare NASA's DC-8 airborne laboratory for the 2012 Antarctic campaign.",
            "Content": "Long hours in the hangar at NASA's Dryden Flight Research Facility mean that the MCoRDS antenna and Airborne Topographic Mapper have been installed and all ground tests for ATM are complete. Next week, the radar and gravimeter teams will begin their preparation work."
        },
        {
            "Title": "Q&A: Michael Studinger",
            "Author": "Maria-Jose Viñas, Cryospheric Sciences Laboratory Outreach Coordinator",
            "Date": "30/09/2012",
            "Intro": "Michael Studinger is Operation IceBridge’s project scientist.",
            "Content": "He trained as a geophysicist in Germany, his home country, before moving to the U.S. to take a position at the Lamont-Doherty Earth Observatory and then transferring to NASA Goddard Space Flight Center in 2010. Studinger has been studying polar regions for 18 years, expanding his initial focus on the geology and tectonics of the Antarctic continent to the overall dynamic of polar ice sheets."
        }
    ]
}

})

Now I want to load that in an HTML page.

I do this with Javascript:

<script type="text/javascript">

function myCallback(data)
{
    var htmlContent;
    $.each(data.news.item,function(index, item)
    {
    htmlContent += "<article>" + "<h1>" + item.Title + "</h1>";
    htmlContent += "<h2>" + item.Author + "</h2>";
    htmlContent += "<p><i>" + item.Date + "</i></p>";
    htmlContent += "<p>" + item.Intro + "</p>";
    htmlContent += "<p>" + item.Content + "</p>" + "</article>";
    });
    $("#main").html(htmlContent);
}

In the body I have <div id="main"></div>.

It’s all correct but I always get undefined at the top of the html page and then my text in my json file. Anybody knows how I can fix this?

Answer 1

This:

var htmlContent;

Should be this:

var htmlContent = '';

A declared variable without a value is undefined. What’s happening is that when you do:

htmlContent += "<article>";

You are basically doing htmlContent = undefined + "<article>". JS coerces undefined into a string to add it to another string.

Initializing the variable to an empty string prevents that form happening.