1

JSONPをHTMLにロードすることについて質問があります。

これは私のJSONPファイルです：

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."
        }
    ]
}

}）

それをHTMLページにロードしたいと思います。

私は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);
}

体の中にあり<div id="main"></div>ます。

それはすべて正しいですが、私は常にhtmlページの上部で未定義になり、次にjsonファイルのテキストが表示されます。誰かが私がこれを修正する方法を知っていますか？

4

2 に答える 2

3

これ：

var htmlContent;

これである必要があります：

var htmlContent = '';

値のない宣言された変数はですundefined。何が起こっているのかというと、次のことを行います。

htmlContent += "<article>";

あなたは基本的にやっていhtmlContent = undefined + "<article>"ます。JSは文字列に強制undefined的に追加して、別の文字列に追加します。

変数を空の文字列に初期化すると、そのフォームが発生しなくなります。

于 2012-10-25T21:28:14.423 に答える
0

これで解決するかどうかはわかりませんが、htmlContent ="";追加する前にhtmlContent文字列を最初に初期化する必要がある場合があります。

于 2012-10-25T21:29:35.193 に答える