javascript - 将 JSON 值附加到Figcaption

Question

我有一个具有以下结构的 JSON 文件，我想在每个图像下显示品牌、型号、名称和价格，但我显然想要不同的值。

[
    {"instrumentGroup":"Woodwind", "category1":"Instrument", "name":" Bb Clarinet", "price":"£400","quantityAvailable":"10", "description":"ABS resin Buffet B12 student clarinet, clear sound.", "rating":"4", "make":"Buffet", "model":"B12"},
    {"instrumentGroup":"Woodwind", "category1":"Instrument", "name":"Bb Clarinet", "price":"£1700","quantityAvailable":"10", "description":" CX with full round sound and clear tone.", "rating":"5", "make":"Yamaha", "model":"YCL-CX"},
    {"instrumentGroup":"Woodwind", "category1":"Instrument", "name":"Bass Clarinet", "price":"£3500","quantityAvailable":"5", "description":"Student Grenadilla wood bass clarinet with silver plated keywork. Range down to Eb.", "rating":"4", "make":"Buffet", "model":"BC1180"}
]

该文件比这个大得多，但现在只使用一点。

在我的 html 中，我有多个容器，因为页面上有更多容器，但产品信息的结构如下。

<article id="prodList">
            <article id="products">
                <section id="row">
                    <figure class="prodInfo">
                        <!--this makes the whole product area clickable!--><a href="#link">
                            <span class="link"></span>
                        </a>
                        <img src="Images/saxophone.png" alt="instrument" width="100" height="100">

                            <figcaption>

                            </figcaption>
                    </figure>

                    <figure class="prodInfo">
                        <!--this makes the whole product area clickable!--><a href="#link">
                            <span class="link"></span>
                        </a>
                        <img src="Images/saxophone.png" alt="instrument" width="100" height="100">

                            <figcaption>

                            </figcaption>
                    </figure>

                </section>  
            </article>  
</article>

我想在图标题中显示信息，品牌/型号在一行，名称在下一行，价格在下一行。下面的 .js 文件正在打印每个图像下 JSON 文件中的最后一个值，但我无法弄清楚如何在每个值经过时打印它，然后在达到第 18 个值时停止。

$.getJSON("products.json", function(result){

        $.each(result, function(key, val){
            $('figcaption').html(val.make + " " + val.model + "<br/>" + val.name + "<br/>" + val.price);
        });
    });

如有任何帮助，我们将不胜感激。最终我将使用分页器在下一页上显示接下来的 18 个值，但一旦第一个值开始工作，我相信这应该会更容易。 主要问题是如何将它们分开，以便在每个 div 中打印一个。

谢谢。

Answer 1

尝试

$.getJSON("products.json", function(result) {
    $.each(result, function(key, val){
        if (key < 18) {
            $("figcaption").eq(key).html(val.make + " " 
            + val.model + "<br/>" + val.name + "<br/>" + val.price);
        }
    });        
});

jsfiddle http://jsfiddle.net/guest271314/6ftjLLjv/