JQuery загрузить определенный контент из файла - PullRequest
Новая
       18

JQuery загрузить определенный контент из файла

3 голосов
/ 21 января 2012

Я пытаюсь получить конкретный текст из простого текста, организованного по тегам или чем-то еще; а затем загрузить существующий div или создать на лету div для загрузки в него.

Не знаю, если с JSON это может быть хорошо

Я пытался создать файл .json data_prod.js следующим образом: 

{"articles":
        [
            {
                "title1":"bla bla bla"
            },
            {
                "title2":"bla bla bla"
            },
            ...
        ]
}

в моем HTML-коде я написал эту функцию: 

    $.getJSON("data_prod.js",function(data)
        {
            var div_data = data.title1;
            $(div_data).appendTo("#tt_mn");
        });

содержимое, которое я хотел бы загрузить в этом случае, это только title1 в существующем div с именем # tt_mn

что-то не так

Теперь я изменился. 

data.json

{
   "articles": [{ "title": "fresa" }, { "title": "limon" }, { "title": "naranja" } ]
}

test_json.html 

<div id="op">push me</div>  
<div id="tt_mn" data-articleidx="1"></div>
<script>
$('#op').live("click", function() {
    // get the index of the article for which the title should be obtained
    var idx = $(this).data('articleidx');
    $.getJSON("data.json", function(data) {
        // be safe and the data parameter conformity prior to extracting the title
        if (data && data.articles && idx < data.articles.length) {
            $("<div>" + data.articles[idx].title + "</div>").appendTo("#tt_mn");
        }
    });
}); 
</script>

* * Пример тысячи двадцать-одина * +1022 *

Ответы [ 3 ]

1 голос
/ 21 января 2012

Сначала вы должны немного изменить свой json, чтобы у вас было одинаковое свойство title для всех элементов: 

{
   "articles": [{ "title": "title 1" }, { "title": "title 2" }, ... ]
}

Затем при обратном вызове функции .getJSON () просмотрите все вашиэлементы и генерировать html-разметку со значениями заголовка.

Я думаю, что наиболее эффективный способ применения разметки - это создать массив строк, представляющих желаемую разметку, и добавить все сразу.Цикл for также будет более эффективным по сравнению с jquery .each () или .map (). 

$.getJSON("data_prod.js", function(data) {
    var titles = [];
    for (var i=0; i<data.articles.length;i++) {
        titles.push("<div>" + data.articles[i].title + "</div>");
    }
    $(titles.join('')).appendTo("#tt_mn");
});

ПРИМЕР

Редактировать:

Поэтому, если вы хотите отобразить один конкретный заголовок одним нажатием кнопки, вы можете добавить атрибут «data-», указывающий, какую статью вы хотите получить.заголовок: 

<button data-articleidx="1">Get title</button>

А затем: 

$('button').click(function(e) {
    // get the index of the article for which the title should be obtained
    var idx = $(this).data('articleidx');
    $.getJSON("data_prod.js", function(data) {
        // be safe and the data parameter conformity prior to extracting the title
        if (data && data.articles && idx < data.articles.length) {
            $("<div>" + data.articles[idx].title + "</div>").appendTo("#tt_mn");
        }
    });
});

Я все же предлагаю вам изменить json, чтобы иметь одинаковое имя свойства для заголовков.Я не могу придумать причину, почему они на самом деле "title1", "title2" ...

1 голос
/ 21 января 2012

Сначала исправьте свой JSON, используя одно и то же свойство title для всех статей вместо использования другого имени свойства (title1, title2, ...): 

{ 
    "articles": 
    [
        {
            "title":"bla bla bla"
        },
        {
            "title":"bla bla bla"
        },
        ...
    ] 
}

и затем вы можете просмотреть эти статьи и использовать свойство title: 

$.getJSON("data_prod.js",function(data) {
    $.each(data.articles, function(index, article) {
        $('<div/>', {
            text: article.title
        }).appendTo("#tt_mn");
    });
});

ОБНОВЛЕНИЕ:

Если вы хотите сохранить исходную структуру вашего JSON и загрузить только title1, вы можете сделать следующее: 

$.getJSON("data_prod.js", function(data) {
    for (var i = 0; i < data.articles.length; i++) {
        var article = data.articles[i];
        for (var prop in article) {
            if (article.hasOwnProperty('title1')) {
                var title = article.title1;
                $('<div/>', {
                    text: title
                }).appendTo("#tt_mn");
                break;
           }
        }
    }
});
0 голосов
/ 21 января 2012

Вот предложение:

1) создать контейнер (ы):

загрузка контента (текст / изображение)

2) добавить очень специфический атрибут для нашего скрипта:

загрузка содержимого (текст / изображение)>

3) добавить скрипт для загрузки динамического контента: 

 <script type="text/javascript">
$(function()){
     $('[data-url]').each(function(){

         // just making sure we have the correct instance.
         var $elem = $(this);
         // Get the url
         var url = $(this).attrr('data-url');


         $.get(url, function(html) {
             /// adding the content to the container.
             $elem.html(html); 
         });
     });

};

`

...