如何在js中将JSON数组字符串转换为换行符？答案

【问题标题】：How to make JSON array string to newline string in js?如何在js中将JSON数组字符串转换为换行符？
【发布时间】：2022-01-05 15:36:19
【问题描述】：

在 React 中，我试图将从服务器获取的 JSON 数据呈现为可读数据。

这是来自服务器的字符串

"[{\"mat_type\":1,\"mat_title\":\"Title1\",\"mat_unit\":2,\"mat_price\":44000,\"mat_cost\":2000},{\"mat_type\":2,\"mat_title\":\"Title2\",\"mat_unit\":2,\"mat_price\":44000,\"mat_cost\":2000},{\"mat_id\":1,\"mat_title\":\"Title\",\"mat_unit\":2,\"mat_price\":4400,\"mat_cost\":2000,\"mat_status\":0}]"

我想让它带有换行符和间距的可读数据。

这是我的快捷功能

<Typography>
  {{JSON.parse(item.api_text).map((item) => {
    console.log(item);
    return `<br>${JSON.stringify(item, null, '\t')}</br>`;
  })} }
</Typography>

这里的 item.api_text 就是上面的字符串。我知道这会产生错误，但我想要这样的东西。谢谢

编辑：我想在不在控制台的文档上像这样显示它。

[{
    "mat_type": 1,
    "mat_title": "Title1",
    "mat_unit": 2,
    "mat_price": 44000,
    "mat_cost": 2000
},
{
    "mat_type": 2,
    "mat_title": "Title2",
    "mat_unit": 2,
    .....

【问题讨论】：

好的，谢谢，在每个键值对之后换行怎么样
'\t' 可能在错误的位置。尝试使用JSON.stringify(item, '\t', 2)
你能举一个你想要的例子吗？
要保留换行符和空格，请使用 <pre> 元素包装 json 字符串输出

标签： javascript reactjs json string stringify

【解决方案1】：

试试这个

var json="[{\"mat_type\":1,\"mat_title\":\"Title1\",\"mat_unit\":2,\"mat_price\":44000,\"mat_cost\":2000},{\"mat_type\":2,\"mat_title\":\"Title2\",\"mat_unit\":2,\"mat_price\":44000,\"mat_cost\":2000},{\"mat_id\":1,\"mat_title\":\"Title\",\"mat_unit\":2,\"mat_price\":4400,\"mat_cost\":2000,\"mat_status\":0}]";

<script type="text/javascript">

  $(document).ready(function () 
  {

var jo=JSON.parse(json);

json=JSON.stringify(jo,null,4);

 $("#json").html(json);

 });

</script>

创建html

 <Typography id="json" style= "white-space: pre-wrap;">
</Typography>

输出

[
    {
        "mat_type": 1,
        "mat_title": "Title1",
        "mat_unit": 2,
        "mat_price": 44000,
        "mat_cost": 2000
    },
    {
        "mat_type": 2,
        "mat_title": "Title2",
        "mat_unit": 2,
        "mat_price": 44000,
        "mat_cost": 2000
    },
    {
        "mat_id": 1,
        "mat_title": "Title",
        "mat_unit": 2,
        "mat_price": 4400,
        "mat_cost": 2000,
        "mat_status": 0
    }
]

【讨论】：

好的。但我希望它在文档中，而不是在控制台中。谢谢
@xxxhomie21 不客气。为什么它在控制台中？我的代码中看不到任何控制台。变量 json 是一个字符串，就是这样。它不是免费的编码器资源，每个人都应该为您创建完整的代码。我发布了一个提示你的任务是把这个字符串放在你想要的地方并告诉大家它是否有用。
@xxxhomie21 我更新了我的答案。立即在您的浏览器中试用。
谢谢，这行得通，但在反应中，我们必须将 style 写为 style={{whiteSpace: 'pre-wrap'}} 才能开始工作。你在你的函数中使用过 jquery 吗？
@xxxhomie21 $("#json").html(json);是 jquery 但我可以很容易地被 javascript 替换

【解决方案2】：

感谢@evolutionxbox，我找到了一种在反应中做到这一点的方法。

在我的反应组件中。 pre 在保留下一行方面效果很好。

            <pre>
              {JSON.stringify(JSON.parse(item.api_text), null, 3)}
            </pre>

另一种选择，可以将样式赋予称为空白的标签：'pre-wrap'，感谢@Serge。我使用了 /> 让它看起来更好

          <Typography id='json' style={{whiteSpace: 'pre-wrap'}}>
            <code>
              {JSON.stringify(JSON.parse(item.api_text), null, 3)}
            </code>
          </Typography>

【讨论】：