3

У меня имеется довольно большой текст. Я хочу его подгружать с JSON. Подскажите, как я могу вставить в JSON такой большой текст? Есть какие-то возможности сделать это?

введите сюда описание изображения

{
  "news": [
    {
      "photo": "./img/img-news/header-background.jpg",
      "article": "Проект «Краснодог»",
      "newsText": "Я родился в провинции Лангедок в 1668-м году.\n
      Немного подумав, я написал еще:\n"
    },
    {
      "photo": "",
      "article": "Проект «Форум добрых дел»",
      "newsText": "Сегодня я вам с радостью сообщаю, что работа выполнена!"
    }
  ]
}

JS

function News() {
        var self = this;
        this.newsItems = [];
        this.renderNews($('.news'));
        this.getJsonItems(function () {
            self.changeNews();
        });
    }


    News.prototype.renderNews = function (jQuerySelector) {
        var $newsImage = $('<div />', {
            class: 'news__image'
        });

        var $newsContent = $('<div />', {
            class: 'news__content'
        });

        var $newsOtherNews = $('<div />', {
            class: 'news__other-news'
        });

        $.get({
            url: './news.json',
            dataType: 'json',
            context: this,
            success: function (data) {
                // Создание фото новости
                var photo = data.news[0].photo;
                $($newsImage).css('background-image', 'url('+ photo +')');

                // Создание заголовка новости
                var article = data.news[0].article;
                var $newsArticle = $('<article />', {
                    text: article
                });
                $newsArticle.appendTo($newsImage);

                // Создание текста новости
                var newsText = data.news[0].newsText;
                var $contentText = $('<div />', {
                    class: 'content__text'
                });
                var $textParagraph = $('<p />', {
                    text: newsText
                });
                $textParagraph.appendTo($contentText);
                $contentText.appendTo($newsContent);

                // Создание таблицы других новостей
                var $contentItem = $('<div />', {
                    class: 'other-news__content'
                });
                for(var i = 0; i < data.news.length; i++) {
                    var $itemArticle = $('<div />', {
                        'data-id': i,
                        class: 'content__item',
                        text: data.news[i].article
                    });
                    $itemArticle.appendTo($contentItem);
                }
                $contentItem.appendTo($newsOtherNews);
            }
        });

        jQuerySelector.append($newsImage);
        jQuerySelector.append($newsContent);
        jQuerySelector.append($newsOtherNews);

    };

    $(document).ready(function () {
        var news = new News();
    });
  • 1
    текст это обычная строка, строка это обычный тип для json – Grundy Feb 23 '18 at 17:57
  • 1
    объясните, почему Вас смущает размер текста, и что принципиально отличает большой (?) текст от маленького. –  Feb 23 '18 at 17:58
  • Мне нужно, чтобы он разделялся по параграфам. А с json'a идёт все сплошником – Валерий Feb 23 '18 at 18:00
  • 2
    параграфы - это уже не текст, а html, html это та же строка, только с html тегами. Либо нужно использовать тег pre для вставки - в нем сохраняются переносы – Grundy Feb 23 '18 at 18:01

1 Answers1

5

var jsonAsText = "{\"text\":\"Я родился в провинции Лангедок в 1668-м году.\\n\\n\
Немного подумав, я написал еще:\\n\\n\
Мой род, хотя ныне и обедневший,  принадлежит к одним из самых славных \
и  древних  семейств  королевства.  Мой  отец  граф  де  Бриссак сражался  в \
Голландии в  полку г-на Лаваля и  был ранен  копьем при осаде Монферрата, на \
стенах  которого он первым водрузил королевское  знамя.  До  17 лет я  жил в \
родовом  замке, где, благодаря заботам моей матушки  баронессы де Монжу, был \
прилично воспитан  и  получил  изрядное  образование. Ныне,  расставшись  со \
своими дорогими родителями, дабы  послужить отечеству  на  поле брани, прошу \
зачислить меня в роту черных гвардейцев его величества.\\n\\n\
Сочинив эту  галиматью,  я принялся за  анкету  и  быстро  заполнил  ее \
соответственно своей красочной биографии.  Перечитав потом все  вместе, я не \
удержался и так громко рассмеялся, что привлек внимание Андрея Михайловича.\\n\
-- Ты чего? -- спросил он, прервав чтение. -- Написал, что ли?\\n\
-- Ага, -- кивнул я в ответ.\"}";

function setContent() { var data = JSON.parse(jsonAsText); $("textarea").val(data.text); //$("div").html(data.text.split("\n").join("<br/>")); $("div").html("<p>"+data.text.split("\n").join("</p><p>")+"</p>"); }

textarea
{
  width:700px;
  height:300px;
}
div
{
  width:700px;
  height:300px;
  border:1px solid black;
  font-family:Courier;
  font-size:small;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="setContent()">Click</button><br/>
<textarea>
</textarea>

<div></div>

Обратите внимание на \ в конце строк:

var test =
{
  "news": [
    {
      "photo": "./img/img-news/header-background.jpg",
      "article": "Проект «Краснодог»",
      "newsText": "Я родился в провинции Лангедок в 1668-м году.\n\
      Немного подумав, я написал еще:\n"
    },
    {
      "photo": "",
      "article": "Проект «Форум добрых дел»",
      "newsText": "Сегодня я вам с радостью сообщаю, что работа выполнена!"
    }
  ]
};

console.log(test);

  • Спасибо! Но у меня почему-то в самом json'e не получается. Толкьо переношу строку сразу подсвечивается красным... в чем ошибка? – Валерий Feb 23 '18 at 18:18
  • @Валерий Добавьте в вопрос пример того, как Вы это делаете. –  Feb 23 '18 at 18:20
  • Внес изменения . – Валерий Feb 23 '18 at 18:22
  • В json'e все равно ругается... – Валерий Feb 23 '18 at 18:27
  • @Валерий Нажмите на кнопку "Выполнить код". –  Feb 23 '18 at 18:28
  • Я сделал так. Скопировал и вставил, но никакой реакции... – Валерий Feb 23 '18 at 18:31
  • @Валерий До тех пор пока Вы внятно не объясните, чем Ваш код/данные отличаются от работающих примеров в ответе, Вам никто не сможет помочь. –  Feb 23 '18 at 18:32
  • Это скорее всего происходит из-за того, что текст из JSON вставляется в тег

    . Из-за этого могут быть проблемы?

    – Валерий Feb 23 '18 at 18:37
  • @Валерий Это - врядли. Что толку гадать? Пример данных Вы уже добавили в вопрос. Теперь добавьте код, который с этими данными работает. –  Feb 23 '18 at 18:39
  • Добавил JS код . – Валерий Feb 23 '18 at 18:42
  • @Валерий В какой строке кода просходит ошибка? –  Feb 23 '18 at 18:59
  • Ошибка не выдается. Просто JSON не реагирует на \n и не переносит строку. – Валерий Feb 23 '18 at 19:01
  • @Валерий Пардон, не понимаю. JSON не может ни на что реагировать, это текстовый формат для javascript-овых объектов. Что происходит при выполнении кода, и что Вы хотите чтобы просходило? –  Feb 23 '18 at 19:04
  • Мне нужно в JSON загрузить большой текст, который я показал в вопросе, со всеми сохраненными переносами. Но добавляя в JSON'e в строку \n, чтобы перенеслось - ничего не выходит – Валерий Feb 23 '18 at 19:05
  • @Валерий Посмотрите, как я в div вставляю техт. Красных строк у Вас вроде нет. –  Feb 23 '18 at 19:21