Question

我想知道是否有人可以帮助我了解如何在我的json doc中访问数据。

[
    {
        "article":"title",
        "img_thumb":"images/image.png",
        "article_content":"This is content",
        "alt":["keyword", "keyword2"]
    },
    {
        //here's article 2
    }
]

当document.ready，我正在执行这个功能，它完美地运作：

var article_populate = function(){
    $.getJSON('json/test.json', function(data){
        $.each(data, function(key, val){
            var article = "<div class='thumb'><img src='" + val.img_thumb + "' class='img_thumb'><div class='div_btn article' id='" + val.article + "'>" + val.article + "</div></div>";
            $('#srch_rslt').append(article);
        });
    })
}

然后，如果用户点击文章标题，我想将文章内容从json附加到文章标题所在的div。

更新：现在正在运作。

$('#srch_rslt').on('click', '.article_title', function(){
    var get_article = $(this).attr('id');
    console.log(get_article);
    $.getJSON('json/test.json', function(data){
        $.each(data, function(key, val){
            if(val.article_id == get_article){
                console.log(val.article_content)
                $('#' + get_article).parent().append(val.article_content);
            }
        });
    });
});

Answer 1

在第二个示例中，您似乎错误地使用了$.getJSON，而在第一个示例中正确使用了$.getJSON('json/test.json', function(data, key, val){。比较

    $.getJSON('json/test.json', function(data){
        $.each(data, function(key, val){

与

$('#srch_rslt').on('click', '.article_title', function(){
    var get_article = $(this).attr('id');
    console.log(get_article);

    var article = $(this);
    $.getJSON('json/test.json', function(data){
        $.each(data, function(key, val){
            if(val.article_id == get_article){
                console.log(val.article_content)
                article.parent().append(val.article_content);
            }
        });
    });
});

编辑以回复原始问题的修改：

你需要做这样的事情：

this

同样，正如评论中所述，我建议您阅读{{1}}在JavaScript中的工作原理。

Answer 2

val是一个包含多篇文章的数组吗？所以你的调用为val.article提供了undefined似乎是合乎逻辑的我的你的json文件文章不是最低级别所以它应该像

val.0.article.search（get_article）

val.1.article.search（get_article）

我建议使用console.log（var）将var的内容转储到控制台;了解如何正确访问数据或正确加载数据。

Answer 3

您不应将article.title用作ID，因为它可能包含非法字符（'，“，à，é....）。

由于您的数据结构是一个数组，您可以使用所点击文章的索引来获取数据：

var articleIndex = $(this).index(); 有了这个，你可以从你的json获得相应的数据：

var articleData = data[articleIndex]

现在您可以附加文章内容： $('selector_where_you_want_data').append(articleData.article_content);

快速而肮脏的方式是： $('selector_where_you_want_data').append(data[$(this).index()].article_content);

使用搜索功能访问json

3 个答案: