Question

我想要做的是将JSON值输出到我的页面，其中我的html模型上的ID与JSON对象的ID匹配：

这是我的JSON文件，得分=％所以10 = 10％：

{
"Sidekicks": [
    {
        "Id": 1098,     // this will be the sidekick "Rose Tyler(Dr Who)" but this name can change at any time;
        "Score": 20     
    },
    {
        "Id": 1099,     // this will be the sidekick "Dr Watson" but this name can change at any time;
        "Score": 10
    }

]

}

在我的html页面上，ID必须与JSON匹配，如下所示：

<div id="sidekicks" class="side-kick-holder">
                <ul>
                    <li>

                        <div id="1098" class="hit super-box shuv-down-10" >

                            <h4>Rose Tyler <span class="thin">(Dr Who)</span>
                            <div class="circle"><img id="red-tick" class="change-img" data-alt-src="img/circle-hover.png" src="img/circle-grey.png" alt="circle"></div>
                            </h4>

                            <div class="line-grey"><span class="red-line-fill"></span></div>
                        </div>

                    </li>
               </ul>
</div>

该值必须填充class="red-line-fill"

我的jquery：

 $(document).ready( function(){
        $.getJSON( "json/sidekicks.json", function(obj){
            $.each(obj, function(key, value){
                $("div#sidekicks").append("")
                });
            });
        });

Answer 1

这样的东西？这只是一个猜测，我很久没有使用过JQ了，我只是在写一个有根据的猜测。没有工作环境来测试它我无法保证。

$(document).ready( function(){
    $.getJSON( "json/sidekicks.json", function(obj){
        $.each(obj.Sidekicks, function(key, value){
            $('div#' + value.Id + '.red-line-fill').text(value.Score);
        });
    });
});

如何获取JSON数据文件以在html页面上输出数据

1 个答案: