Question

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

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

这是代码：

的index.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>

products.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"

        }
    ]
}

知道为什么会这样吗？

Answer 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开发工具等），它将帮助你跟踪这些东西。

使用Javascript加载JSON文件内容

1 个答案: