Разрыв строки в строке JSON Javascript

Я пытаюсь прочитать данные из файла JSON, содержащего список блогов. Я хочу разбить каждый из этих блогов на небольшие абзацы. Я думал, что добавление \n поможет, но это не так. Как я могу этого добиться?

Это мой blogs.json файл:

[
  {
    "id": 1,
    "name": "The 48 Laws Of Power",
    "blog": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. \n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. \n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum",
    "img": "https://i.ibb.co/RpP2LGp/48-Laws-Of-Power.jpg"
  },
  {
    "id": 2,
    "name": "Rich Dad Poor Dad",
    "blog": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. \n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. \n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum",
    "img": "https://i.ibb.co/8Brh2Nc/rich-Dad-Poor-Dad.jpg"
  },
  {
    "id": 3,
    "name": "Show Your Work",
    "blog": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. \n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. \n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum",
    "img": "https://i.ibb.co/VjLBT1T/show-Your-Work.jpg"
  },
  {
    "id": 4,
    "name": "Atomic Habits",
    "blog": "Atomic Habits by James Clear is an incredible book on habits and the massive effect that they have on our lives. Published in 2018 and now an international bestseller, Atomic Habits centers around this idea that “habits are the compound interest self-improvement.” If you want to improve yourself in any way, look first to your daily habits. \n Clear relates habits to compound interest; an interesting model he suggests that really helped me visualize the effect that these tiny behaviors had on our lives is set up like this. \n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. \n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. \n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum",
    "img": "https://i.ibb.co/ss0kLQw/atomic-Habits.jpg"
  },
  {
    "id": 5,
    "name": "The Almanack Of Naval Ravikant",
    "blog": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. \n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. \n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum",
    "img": "https://i.ibb.co/87SmcFz/alamanack-naval.jpg"
  },
  {
    "id": 6,
    "name": "The 4-Hour Work Week",
    "blog": "The first chapter, D is for Definition, followed its name and defined the clear cut differences in mindset between the new rich and the deferrers. This clued me in to the goal of this book, to escape what has been perpetuated our entire lives. However, I was still skeptical. It presented several, grandiose claims; how could any of it be truly doable? Sure, someone like Tim Ferriss, Princeton graduate and energy-supplement extraordinaire could pull it off, but that doesn't mean that me, the average Joe, could somehow make an automated stream of revenue so that I can live all around the world and have no worries.The next chapter, E is for Elimination, had the most profound effect on me. It presented ideas such as Parkinson's Law (work expands to fill the time allotted to it) and the Pareto Principle (80/20), ideas I had heard from videos before, but never explained as well as in this chapter. After reading, I immediately evaluated my time wasters and consumers and began to slowly deconstruct my day and how to best optimize it. This chapter was one that I could apply the day after reading it successfully, so it was very useful. \n The next chapter, E is for Elimination, had the most profound effect on me. It presented ideas such as Parkinson's Law (work expands to fill the time allotted to it) and the Pareto Principle (80/20), ideas I had heard from videos before, but never explained as well as in this chapter. After reading, I immediately evaluated my time wasters and consumers and began to slowly deconstruct my day and how to best optimize it. This chapter was one that I could apply the day after reading it successfully, so it was very useful. \n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum",
    "img": "https://i.ibb.co/Pxtt4dH/4-hour-work-week.jpg"
  }
]

И вот как я это читаю BookDetails.js :

import React, { useEffect, useState } from "react";
import { useParams } from "react-router-dom";

const BookDetails = () => {
  const { id } = useParams();
  const [blog, setBlog] = useState({});

  useEffect(() => {
    const url = `/blogs.json`;
    console.info(url);
    fetch(url)
      .then((res) => res.json())
      .then((data) => {
        const currentBlogArray = data.filter((book) => book.id == id);
        setBlog(currentBlogArray.length > 0 ? currentBlogArray[0] : {});
      });
  }, []);

  return (
    <div className = "px-6">
      <h2>This is book details: {id} </h2>

      <h2 className = "flex justify-center font-bold text-2xl mb-6">
        {" "}
        {blog.name}
      </h2>
      <h2> {blog.blog}</h2>
    </div>
  );
};

export default BookDetails;
Руководство для начинающих по веб-разработке на React.js
Руководство для начинающих по веб-разработке на React.js
Веб-разработка - это захватывающая и постоянно меняющаяся область, которая постоянно развивается благодаря новым технологиям и тенденциям. Одним из...
Калькулятор CGPA 12 для семестра
Калькулятор CGPA 12 для семестра
Чтобы запустить этот код и рассчитать CGPA, необходимо сохранить код как HTML-файл, а затем открыть его в веб-браузере. Для этого выполните следующие...
Как собрать/развернуть часть вашего приложения Angular
Как собрать/развернуть часть вашего приложения Angular
Вам когда-нибудь требовалось собрать/развернуть только часть вашего приложения Angular или, возможно, скрыть некоторые маршруты в определенных средах?
Оптимизация React Context шаг за шагом в 4 примерах
Оптимизация React Context шаг за шагом в 4 примерах
При использовании компонентов React в сочетании с Context вы можете оптимизировать рендеринг, обернув ваш компонент React в React.memo сразу после...
Интервьюер: Почему &apos;[] instanceof Object&apos; возвращает &quot;true&quot;?
Интервьюер: Почему '[] instanceof Object' возвращает "true"?
Все мы знаем, что [] instanceof Array возвращает true, но почему [] instanceof Object тоже возвращает true?
Абстрактное синтаксическое дерево (AST) и как оно работает с ReactJS
Абстрактное синтаксическое дерево (AST) и как оно работает с ReactJS
Абстрактное синтаксическое дерево (AST) - это древовидная структура данных, которая представляет структуру и иерархию исходного кода на языке...
1
0
76
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Замените \\n\\ на \n, чтобы добавить разрыв строки. Используйте \n\n, чтобы добавить два разрыва строки.

Ответ принят как подходящий

Вы можете добавить тег <p> для каждого необходимого места в строке, затем при чтении JSON разделить его на основе тега <p>, а затем создать свой собственный HTML.

Пример:

const json = "Paragraph 1<p>Paragraph 2";
const p = document.querySelector('#paragraph');

p.innerHTML = json.split('<p>').map(paragraph=>{
       return '<p>' + paragraph + '</p>';
      }).join('')
<html>
<body>
<div id = "paragraph"> </div>
</body>
</html>
import React, { useEffect, useState } from "react";
import { useParams } from "react-router-dom";

const BookDetails = () => {
  const { id } = useParams();
  const [blog, setBlog] = useState({});
  useEffect(() => {
    const url = `blogs.json`;
    fetch(url)
      .then((res) => res.json())
      .then((data) => {
        const currentBlogArray = data.filter((book) => book.id == id);
        const currentBlog =
          currentBlogArray.length > 0 ? currentBlogArray[0] : {};
        setBlog({
          ...currentBlog,
          blog: currentBlog.blog.split("\n"),
        });
      });
  }, []);

  return (
    <div className = "px-6">
      <h2>This is book details: {id} </h2>
      <h2 className = "flex justify-center font-bold text-2xl mb-6">
        {blog.name}
      </h2>
      <h2>
        {blog.blog?.map((paragraph) => {
          return (
            <p>
              <span style = {{ marginLeft: 25 }}></span>
              {paragraph}
            </p>
          );
        })}
      </h2>
    </div>
  );
};

export default BookDetails;

Спасибо. Я отредактировал свой пост, чтобы добавить больше деталей. Как я могу применить изменения, которые вы предложили в моем BookDetails.js?

SpeedBird 19.11.2022 23:49

Я его уже обновил, логика та же.

Elvin 20.11.2022 00:12

Это потрясающе! Большое спасибо! Если я хочу добавить еще немного места, например, двойной разрыв строки, как я могу этого добиться?

SpeedBird 20.11.2022 00:28

Есть несколько способов сделать это, один из них, например, использование маржи, я обновил. Если этот ответ подходит, примите его.

Elvin 20.11.2022 00:45

Я только что сделал javascript <h2> {blog.blog?.map((paragraph) => { return <p className = "mb-4">{paragraph}</p>; })} </h2> и вуаля! Большое спасибо за помощь еще раз

SpeedBird 20.11.2022 00:52

Это не проблема, есть много разных способов сделать одно и то же, просто попробуйте и сделайте это!

Elvin 20.11.2022 00:56

Заменять:

<h2> {blog.blog} </h2>

С

<h2> {blog.blog.split(/\n/).map((t,i) => (<div key = {i}>{t}</div>))} </h2>

Это разделит ваш текст на символ новой строки (отбросив его). Затем каждая результирующая подстрока преобразуется в div для отображения.

О да! Это тоже работает. Тогда я в порядке. Большое спасибо!

SpeedBird 20.11.2022 00:55

Другие вопросы по теме