Question

我有一个对象：

var computer={
    "Home":{},
    "Desktop":{},
    "Documents":{},
    "Downloads":{},
    "Library":{},
    "Movies":{},
    "Music":{},
    "Pictures":{},
    "Library":{},
    "Downloads":{},
    "Files":{},
    "Devices":{},
    "USB":{},
    "Hard_Drive":{}
}

我将它输出到HTML中。

var exp=JSON.stringify(computer);
$("#targetDiv").append('<p class="text">'+exp+'</p>');

但输出是这样的：

{"Home":{},"Desktop":{},"Documents":{},"Downloads":{},"Library":{},"Movies":{},"Music":{},"Pictures":{},"Files":{},"Devices":{},"USB":{},"Hard_Drive":{}}

示例：

var computer={
    "Home":{},
    "Desktop":{},
    "Documents":{},
    "Downloads":{},
    "Library":{},
    "Movies":{},
    "Music":{},
    "Pictures":{},
    "Library":{},
    "Downloads":{},
    "Files":{},
    "Devices":{},
    "USB":{},
    "Hard_Drive":{}
};

var exp=JSON.stringify(computer);
$("#targetDiv").append('<p class="text">'+exp+'</p>');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="targetDiv"></div>

我如何格式化它，看起来像这样？

{
"Home":{},
"Desktop":{},
"Documents":{},
"Downloads":{},
"Library":{},
"Movies":{},
"Music":{},
"Pictures":{},
"Files":{},
"Devices":{},
"USB":{},
"Hard_Drive":{}
}

我想我需要一个循环遍历输出的循环，每当有,或}时，它会放置一个<br/> HTML标记，但我不知道如何那样做。

Answer 1

正如Tushar所说，一种方法是将JSON.stringify()的输出放在<pre>内。

df.groupby('A').B.sum().reindex(list('abcdef'), fill_value=0)

A
a    3
b    0
c    7
d    0
e    5
f    0
Name: B, dtype: int64

$("#targetDiv").append('<pre>' + JSON.stringify(computer,null,1) + '</pre>');

如果你想使用<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <script>var computer={ "Home":{},"Desktop":{},"Documents":{},"Downloads":{},"Library":{}, "Movies":{},"Music":{},"Pictures":{},"Library":{},"Downloads":{},"Files":{}, "Devices":{},"USB":{},"Hard_Drive":{} }</script> <div id="targetDiv"></div>，但实际上不希望每行开头有空格（即格式与问题中所需的输出格式完全相同）：

<pre>

$("#targetDiv").append('<pre>' + JSON.stringify(computer,null,1).replace(/^\s*/gm,'') + '</pre>');

如果您不想使用<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <script>var computer={ "Home":{},"Desktop":{},"Documents":{},"Downloads":{},"Library":{}, "Movies":{},"Music":{},"Pictures":{},"Library":{},"Downloads":{},"Files":{}, "Devices":{},"USB":{},"Hard_Drive":{} }</script> <div id="targetDiv"></div>，则可以使用<pre>分隔这些行。

<br/>

$("#targetDiv").append(JSON.stringify(computer,null,'<br/>').replace(/}\s*}/,'}<br/>}'));

或者，您可以将每一行括在<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <script>var computer={ "Home":{},"Desktop":{},"Documents":{},"Downloads":{},"Library":{}, "Movies":{},"Music":{},"Pictures":{},"Library":{},"Downloads":{},"Files":{}, "Devices":{},"USB":{},"Hard_Drive":{} }</script> <div id="targetDiv"></div>中。你问题中的代码暗示这就是你想要的。

<p class="text"></p>

//Note: The following uses replace to both enclose each line in <p></p> and remove
//  all excess whitespace.  Removing the whitespace is not needed, but may be
//  desirable as including the whitespace results in additional text nodes between
//  each <p>.
$("#targetDiv").append(JSON.stringify(computer,null,1).replace(/^\s*([^\n]*)\n/gm,'<p class="text">$1</p>'));

Answer 2

您可以使用$.each()，JSON.stringify()，.append()，.html()，.lastIndexOf()，.slice()

$().ready(function() {

  var computer = {
    "Home": {},
    "Desktop": {},
    "Documents": {},
    "Downloads": {},
    "Library": {},
    "Movies": {},
    "Music": {},
    "Pictures": {},
    "Files": {},
    "Devices": {},
    "USB": {},
    "Hard_Drive": {}
  }

  var div = $("#targetDiv");
  div.html("{<br>");

  $.each(computer, function(key, value) {
    div.append(`"${key}":${JSON.stringify(value)},<br>`)
  });

  div.html(function(_, html) {
    // remove last comma
    var lastcomma = html.lastIndexOf(",");
    html = html.slice(0, lastcomma) + html.slice(lastcomma + 1)
    return html + "}"
  });

});

jsfiddle https://jsfiddle.net/bh9mheg1/1

当表示为字符串时，格式化每行具有一个属性的对象

2 个答案: