Question

我第一次尝试使用JSON，只有最少的jquery经验。

我有这个JSON：

{
"stoelen":
[
    {"type": "stoel", "title": "Stoel1", "image": "/images/stoelen/1.png", "description": "Hier komt de beschrijving van de eerste foto", "secondaryimage": "/images/grid/7.png"},
    {"type": "stoel", "title": "Stoel2", "image": "/images/stoelen/2.png", "description": "Hier komt de beschrijving van de tweede foto", "secondaryimage": "/images/grid/6.png"},
    {"type": "hogestoel", "title": "Hogestoel1", "image": "/images/stoelen/1.png", "description": "Hier komt de beschrijving van de eerste foto", "secondaryimage": "/images/grid/7.png"},
    {"type": "hogestoel", "title": "Hogestoel2", "image": "/images/stoelen/2.png", "description": "Hier komt de beschrijving van de tweede foto", "secondaryimage": "/images/grid/6.png"}
]}

我正在研究这个jquery脚本（在＆＃34;进展＆＃34;中工作）：

$(document).ready(function() {
$("#collectiestoelen li").on("click", function(){

    var stoel_id = $(this).data("id");

    $.getJSON("collectie.json",function(data){

    });
});
});

现在我要做的是当你点击未加序列表中的列表项时，网站从JSON加载相应的数据并将其插入到html中，如下所示：

    <img class="detailimage" src="image url here">
    <div>
        <h4>title here</h4>
        <p>description here</p>
    </div>
    <img class="secondaryimage" src="secondary img url here">

另外，我打算在3个不同的页面上使用它：椅子，更大的椅子和桌子。

我是如何做到这一点的，以及在JSON中存储它的最佳方法是什么？ - ＆gt;使用3个不同的json文件？还是可以在一个JSON中存储不同的数组？）我知道这是一个初学者问题，但我搜索得很高，也没有用。到目前为止我得到的是教程和一位试图帮助我的朋友（但他没有太多时间，而且我也不了解很多）。

请随时询问任何附加信息并提前致谢！

Answer 1

在纯粹的javascript / jQuery方式中，您需要将标签（如div）附加到json中的所有元素。例如：

<div id="container"></div>

然后在javascript中：

$('#container').html('');
$.getJSON("collectie.json",function(data){
  for(var i = 0; i < data.stoelen.length; i++)
  {
    var elem = $("<img class='detailimage' src='" + data.stoelen[i].image+"'....");
    //... define all the elements and then append:
    $('#container').append(elem);
  }    
});

这个问题是javascript和html之间的意大利面条代码。我的建议是使用knockout.js，它使用数据绑定样式。有了这个，你只需设置HTML，一旦javascript改变，绑定和淘汰就会更新UI。

检查文档和样本。这很容易学习和实施。

修改

在http://jsfiddle.net/L456b/中，您可以看到knockout如何呈现json数据。您只需要调整代码。

如果你只想显示JSON中的一个元素，比如第三个，你可以使用：

<div data-bind="with: selectedStoelen"> <img data-bind="attr: { src: image }"/> <div> <h4 data-bind="text: title"></h4> <p data-bind="text: description"></p> </div> <img data-bind="attr: { src: secondaryimage }"/> </div> function ViewModel(my_array) { var self = this; self.selectedStoelen = ko.observable(my_array[2]); }

如果你需要更改被盗的选项，比如javascript中的另一个动作，你只需设置vm.selectedStoelen（my_array [my_desired_index]）。每次可观察的更改淘汰赛都会使用新信息更新html。

问候！

从json中选择特定数据

1 个答案: