0

我正在尝试使用 jQuery / Javascript 将 JSON 文件中的内容加载到 HTML 页面。

每当我尝试加载页面时，都会出现一个空页面。

这是代码：

索引.html

  <!DOCTYPE html>
<html>
<head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">
    <style>img{ height: 100px; float: left; }</style>
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
</head>
<body>
<div id="products">

</div>
<script>
    var my_json;
    $(function(){
        $.getJSON('products.ajson', function(data) {
            var output="<ul>";
            for (var i = 0; i < data.Products.length; ++i) {
                output+="<li>" + data.Products[i].Name + " " + data.Products[i].Album + "--" + data.Products[i].Label+ data.Products[i].Tracks + data.Products[i].Price + data.Products[i].Genre+"</li>";
            }

            output+="</ul>";
            document.getElementById("products").innerHTML=output;

        });
    });
</script>
</body>
</html>

产品.json

{
    "Products": [
        { "Name": "Pink Floyd",
            "Album": "The Best Of Pink Floyd: A Foot In The Door",
            "Label": "EMI UK",
            "Tracks":"Hey You, See Emily Play, The Happiest Days Of Our Lives, Another Brick in The Wall (Part 2), Have a cigar, Wish You Where Here, Time, The Great Gig in the Sky, Money, Comfortably Numb, High Hopes, Learning to Fly, The Fletcher Memorial Home, Shine On You Crazy Diamond, Brain Damage, Eclipse" ,
            "Price": "16.40",
            "Genre": "Rock"

        },
        {
            "Name": "Depeche Mode",
            "Album": "A Question Of Time",
            "Label": "Mute",
            "Tracks":"A Question Of Time, Black Celebration, Something To Do, Stripped, More Than A Party, A Question Of Time(extended), Black Celebration" ,
            "Price": "4.68" ,
            "Genre": "Rock"
        },
        {
            "Name": "Burial",
            "Album": "Street Halo/Kindred",
            "Label": "Hyperdub Japan",
            "Tracks":"Street Halo, NYC, Stolen Dog, Kindred, Loner, Ashtray Wasp" ,
            "Price": "14.06",
            "Genre": "Future Garage"

        },

        {
            "Name": "Aphex Twin",
            "Album": "I Care Because You Do",
            "Label": "1972 US",
            "Tracks":"Acrid Avid Jam Shared, The Waxen Pith, Wax The Nip, Icct Hedral (edit),  Ventolin (video version), Come On You Slags, Start As You Mean To Go On, Wet Tip Hen Ax, Mookid, Alberto Balsalm ,  Cow Cud Is A Twin, Next Heap With " ,
            "Price": "21.10",
            "Genre": "Electronica"
        },

        {
            "Name": "Daft Punk",
            "Album": "Discovery",
            "Label": "",
            "Tracks":"One More Time,  Aerodynamic, Digital Love, Harder Better Faster Stronger, Crescendolls , Nightvision,  Superheroes, High Life ,Something About Us,  Voyager ,Veridis Quo, Short Circuit, Face To Face," ,
            "Price": "23.44"   ,
            "Genre": "Nu-Disco"
        },

        {
            "Name": "Jean Michelle Jarre",
            "Album": "Oxegene 2010",
            "Label": "Oxegene",
            "Tracks":"Oxegene 2010" ,
            "Price": "8.20",
            "Genre": "Ambient"
        },

        {
            "Name": "Joy Division",
            "Album": "In The Studio With Martin Hannett",
            "Label": "Interstate",
            "Tracks":"Digital Full Track,  Noise Drums Sine Warm-up,  Square Heat Ambience Workout, Glass - Breakout Full Track, Synth Ambience Warm-up, Ambience Atmosphere Warm-up, Atmosphere Setting Up, Drums & Bass Full Atmosphere Warm-up Silence, Atmosphere Full Track Metronome Intro - Hannett Intro Question Etc, Metronome Initial Adjustments #1, Metronome Initial Adjustments #2 Industrial Build Up Etc, Dead Souls Sound Check Drums Recognition Check, Dead Souls + Metronome Intro Adjustment Full Track Etc, Cups Smash 'Synth Filters Sweeps' Take #1, Hannett Interview Something Fishy, Ice Age Bass Ambience Warm-up, Full Track Ice Age, Bass Intro Noise Ambience, Clapping Drums Clapping Prog N4 Complete Full Track + Noise, Full Track N4 Programming + Noises, Full Eternal Track,  More N4 Drum Programming Bass Guitar, N4 Industrial, N4 More Warm Up, Digital Ambience Warmth  Rooms Warm-up - Shakin Speaker Dust Off" ,
            "Price": "22.27",
            "Genre": "Rock"
        },

        {
            "Name": "Anthony Rother",
            "Album": "Mother",
            "Label": "Datapunk Germany",
            "Tracks":"Mother, Cinema" ,
            "Price": "10.54",
            "Genre": "Electro"
        },

        {
            "Name": "Gorillaz",
            "Album": "Plastic Beach",
            "Label": "EMI UK",
            "Tracks":"Orchestral Intro,  Welcome To The World Of The Plastic Beach, White Flag, Rhinestone Eyes, Stylo, Superfast Jellyfish, Empire Ants,  Glitter Freeze, Some Kind Of Nature, On Melancholy Hill,  Broken, Sweepstakes ,  Plastic Beach ,  To Binge , Cloud Of Unknowing , Pirate Jet " ,
            "Price": "7.02" ,
            "Genre": "Hip Hop"
        },

        {
            "Name": "Eminem",
            "Album": "Recovery",
            "Label": "",
            "Tracks":"Cold Wind Blows, Talkin' 2 Myself (feat Kobe),  On Fire , Won't Back Down (feat P!nk) ,WTP , Going Through Changes ,  Not Afraid , Seduction, No Love (feat Lil Wayne) ,  Space Bound ,  Cinderella Man , To Life, So Bad ,  Almost Famous ,  Love The Way You Lie (feat Rihanna) , You're Never Over, rack 17" ,
            "Price": "19.92",
            "Genre": "Hip Hop"

        }
    ]
}

知道为什么会这样吗？

4

1 回答 1

1

你已经落后products.Products了。Products.products返回变量是products，它有一个名为 的属性Products。你需要调用它products.Products。

也许为了避免歧义，调用你的结果变量result或其他东西，所以你可以说result.Products.

另外，我建议使用标准for循环而不是for..in循环。如果有任何其他属性分配给Array原型（这是可能的 - 某些库会为原型分配新功能，例如indexOf），您将遇到问题。

for (var i = 0; i < products.Products.length; ++i) {
    // do something with products.Products[i]
}

由于这是一个 javascript 错误，您可以通过调试器运行它来查看它。每当你看到这样奇怪的东西时，打开控制台（Chrome 开发工具、Firebug、IE 开发工具等），它会帮助你追踪这些东西。

于 2013-03-21T16:25:42.217 回答