如何使 JSON 在我的 React-Typescript 应用程序中更易于阅读？-解网

问：

我按照 Stephen Grider 的 React 和 Typescript 课程制作了 JBook 应用程序。我想确保用户本地文件的内容在 JBook 中清楚地写满了他们的所有内容。目前，内容全部是JSON格式，这在可读性方面不是很好。

我：local-api/src/routes/cell.ts

import express from "express";
import fs from "fs/promises";
import path from "path";

interface Cell {
  id: "string";
  content: "string";
  type: "text" | "code";
}

interface LocalApiError {
  code: string;
}

export const createCellsRouter = (fileName: string, dir: string) => {
  const router = express.Router();
  router.use(express.json());
  const fullPath = path.join(dir, fileName);

  router.get("/cells", async (req, res) => {
    const isLocalApiError = (err: any): err is LocalApiError => {
      return typeof err.code === "string";
    };
    try {
      
      const result = await fs.readFile(fullPath, { encoding: "utf-8" });

      res.send(JSON.parse(result));
    } catch (err) {
      if (isLocalApiError(err)) {
        if (err.code === "ENOENT") {
        
          await fs.writeFile(fullPath, "[]", "utf-8");
          res.send([]);
        }
      } else {
        throw err;
      }
    }
  });

  router.post("/cells", async (req, res) => {
    const { cells }: { cells: Cell[] } = req.body;
    
    await fs.writeFile(fullPath, JSON.stringify(cells), "utf-8");
    res.send({ status: "ok" });
  });

  return router;
};

如果我改成这样：router.post

router.post("/cells", async (req, res) => {
    const { cells }: { cells: Cell[] } = req.body;
    const formattedContent = cells
      .map((cell) => {
        if (cell.type === "text") {
     
          return `/* Text Cell: ${cell.id} */\n/* ${cell.content}*/`;
        } else {
    
          return `/* Code Cell: ${cell.id} */\n${cell.content}`;
        }
      })
      .join("\n\n");

    await fs.writeFile(fullPath, formattedContent, "utf-8");
    res.send({ status: "ok" });
  });

我想我需要编写一个自定义 paser 才能让它工作？如果是这样的话，我不确定从哪里开始。

或者是否有任何可能有用的库？

ReactJS 节点 .js JSON 打字稿

最好不要发明一种新的格式。这只是意味着您的文件更难处理，实际上，可能会使它们的可读性降低，因为现在它们无法使用旨在操纵这些格式的已知工具。你要依靠开放标准。但是，对于繁重的文本应用程序，可能有比 JSON 更好的方法......

这听起来像是你可以将 Markdown 和 Front Matter 作为一种格式（被许多其他产品使用，如 Jekyll 和 Github）。

Markdown 专注于显示和格式化大块的文本，但随着 Front Matter 的添加，这些 Markdown 文件（）也可以指定 YAML 格式的结构化数据的小前导码。.md

使用任何 Markdown 阅读器（VSCode 有一个内置的阅读器）你也会得到很好的显示效果。

因此，条目可能如下所示：

---
id: My example ID
type: text
---

I am the content for this entry!

Front Matter 有很多 NPM 库来生成和解析这种格式，如灰质、前物质，但更新和支持最多的库似乎是 mdast-util-from-markdown 和 mdast-util-frontmatter 用于前物质部分。

值得注意的是，将条目存储在 JSON 中可能仍然有意义。如果这是由真实的数据库支持的，那么你必须符合它的标准。但是，您可以轻松地接受 Markdown 格式的输入，还可以通过在 2 种格式之间进行转换来提供终结点以此格式检索它们。

上一个：.find（）不是一个函数，当我尝试从 JSON 文件中查找 id 时，它会像这样返回

下一个：为什么我不能将 JWT 令牌传递给我的 swagger

如何使 JSON 在我的 React-Typescript 应用程序中更易于阅读？

How do I make JSON easier to read in my React-Typescript app?

评论