网页的 JSON 格式 [关闭]答案

【问题标题】：JSON Formating on web pages [closed]网页的 JSON 格式 [关闭]
【发布时间】：2020-08-24 11:07:35
【问题描述】：

我正在从返回 JSON 的服务器获取 json 数据，看起来像这样：

{
    blogbody: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque omnis veniam optio distinctio eligendi doloremque.↵↵Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque omnis veniam optio distinctio eligendi doloremque.↵↵Below is a list - Lorem ipsum dolor sit:↵ ⁃ Lorem ipsum dolor sit amet.↵ ⁃ Lorem ipsum dolor sit amet.↵ ⁃ An experience section.↵ ⁃ Lorem ipsum dolor sit amet (if any).↵ ⁃ Lorem ipsum dolor sit amet. ↵↵Lorem ipsum dolor sit amet. ↵↵Lorem ipsum dolor sit amet!↵",
    blogimage: "https://source.unsplash.com/it",
    blogtype: "code",
    blogvideo: "",
    description: "Some description ",
    links: [el, el, el],
    posted: "2020-08-24T07:33:10.693Z",
    title: "Some title",
    __v: 0,
    _id: "5f436d367341110004f4nsbsjb2"
}

如何格式化网页上的blogbody 值，以便为之前的每个句子创建一个 p 标签，并为每个列表输入 key 和一个 ul 标签？请帮忙。

【问题讨论】：

如果你能详细说明你迄今为止为实现它所做的努力，那就更好了。这向其他人提供了有关该问题的更多见解
如果你想要完全控制你应该使用模板文字。这是一个示例：jsfiddle.net/5wx1husj

标签： javascript html json reactjs

【解决方案1】：

您可以使用.split(".") 将句子分成一个数组，这实际上会给您这样的东西：

["Lorem ipsum dolor sit amet consectetur adipisicing elite", "another sentence"]

然后您可以使用Array.prototype 上的任何方法（例如forEach、map 等）循环该数组，并创建您的p 元素并将其附加到DOM。

所以你最终会写一些类似的东西：

const data = {
    blogbody: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque omnis veniam optio distinctio eligendi doloremque.↵↵Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque omnis veniam optio distinctio eligendi doloremque.↵↵Below is a list - Lorem ipsum dolor sit:↵ ⁃ Lorem ipsum dolor sit amet.↵ ⁃ Lorem ipsum dolor sit amet.↵ ⁃ An experience section.↵ ⁃ Lorem ipsum dolor sit amet (if any).↵ ⁃ Lorem ipsum dolor sit amet. ↵↵Lorem ipsum dolor sit amet. ↵↵Lorem ipsum dolor sit amet!↵",
    blogimage: "https://source.unsplash.com/it",
    blogtype: "code",
    blogvideo: "",
    description: "Some description ",
    links: ["el", "el", "el"],
    posted: "2020-08-24T07:33:10.693Z",
    title: "Some title",
    __v: 0,
    _id: "5f436d367341110004f4nsbsjb2"
}

const sentences = data.blogbody.split(".")
const div = document.createElement("div")
const ps = sentences.map(s => `<p>${s}</p>`)
div.innerHTML = ps.join("")

那么你可以试着弄清楚如何从句子中去掉enter。

【讨论】：

【解决方案2】：

理想情况下，您应该在 blogbody 值和 ENTER 中为 UL 列表添加一个内部数组，在将 JSON 数据发送到代码之前添加 <BR> 标签。

【讨论】：