在 HTML 中格式化编号的 JSON 列表答案

【问题标题】：Format numbered JSON list in HTML在 HTML 中格式化编号的 JSON 列表
【发布时间】：2017-01-13 00:52:47
【问题描述】：

我有数据以 JSON 格式返回，如下所示：

 {
"Text": "This is 1",
"Number": "1."
},
{
"Text": "This is 2 ",
"Number": "2."
 },
{
"Text": "This is 3 ",
"Number": "3."
},
{
"Text": "test indent",
"Number": "a."
 },
{
"Text": "test indent 2",
"Number": "b."
},
{
"Text": "insrt 1",
"Number": "i."
},
{
"Text": "back to indent ",
"Number": "c."
},
{
"Text": "This is 4 ",
"Number": "4."
}

我在 HTML 中显示它，如下所示：

<div data-bind="foreach: numberedList, visible: numberedList().length > 0">
<span data-bind="text: number"></span>
<span data-bind="html: text"></span><br />
</div>

我需要添加什么功能/代码，数据应该根据数字/字母缩进？我希望 HTML 页面如下所示：

谢谢

【问题讨论】：

缩进你可以简单地使用 CSS
有一种方法可以在 CSS 中指定对齐列表中的不同数字（a、1、i 等）吗？谢谢
展示您希望如何在视图中对齐不同数字的示例。
我添加了我想如何对齐数字。谢谢！

标签： html json knockout.js html-lists

【解决方案1】：

为了实现您想做的事情，您需要修改数据的结构。您当前的数据之间没有任何关系，并且使用该数据实现这样的事情会有点混乱。

这是一个示例，您的数据可能是这样的：https://jsfiddle.net/kyr6w2x3/76/

HTML：

<div data-bind="foreach:Items">
  <span data-bind="text:Number"></span><span data-bind="text:Text"></span>
  <div data-bind="foreach:Children">
     <div class="sub-1">
         <span data-bind="text:Number"></span><span data-bind="text:Text"></span>
     </div>
     <div data-bind="foreach:Children">
        <div class="sub-2">
           <span data-bind="text:Number"></span><span data-bind="text:Text"></span>
        </div>
     </div>
   </div>
</div>

JS：

data =  [
   {
      "Text":"This is 1",
      "Number":"1.",
      "Children":[]
   },
   {
      "Text":"This is 2",
      "Number":"2.",
      "Children":[]
   },
   {
      "Text":"This is 3",
      "Number":"3.",
      "Children":[
         {
            "Text":"test indent",
            "Number":"a.",
            "Children":[]
         },
         {
            "Text":"test indent 2",
            "Number":"b.",
            "Children":[
               {
                  "Text":"insert i",
                  "Number":"i.",
                  "Children":[]
               }
            ]
         },
         {
            "Text":"back to indent",
            "Number":"c.",
            "Children":[

            ]
         },

      ]
   }
]
function AppViewModel() {
    var self = this;
    self.Items = ko.observableArray(data);
}
var VM = new AppViewModel()
ko.applyBindings(VM);

【讨论】：

感谢您的回复 - 最多可以有 4 个子级别 - 这是否意味着我必须执行 4 个循环 - 我认为如果我可以为所有内容放置一个循环会很好，但如果数据这么乱，那我就重构一下吧。
如果你想把它们全部放在一个循环中，那么你需要在你的数据之间建立一个关系，比如 id ， parentId 但是你会在一个循环中再有一些 if 语句，以便通过使用这些关系 (id,parent-id) 应用具有正确类的正确数据进行缩进。如果您查看嵌套循环的复杂性，big-O notation 通常（并非总是）为 O(n²)。从数学上讲，我们可以说它会在更坏的情况下执行 n² 次，但 Big-O 并不总是准确地衡量正在完成的工作量。由你决定使用哪一个，我会使用嵌套循环。
嵌套循环对我来说似乎更有意义。我将更新我的数据结构。非常感谢！

【解决方案2】：

下面是如何在 css 中使用类名来实现。如果您希望嵌套确定类型，您可以替换 ol > ol 类型选择器的类名。

ol.alpha {
  counter-reset: alphalist;
}

ol.alpha > li {
  list-style: none;
}

ol.alpha > li::before {
  content: counter(alphalist, lower-alpha)". ";
  counter-increment: alphalist;
}


ol.roman {
  counter-reset: romanlist;
}

ol.roman > li {
  list-style: none;
}

ol.roman > li::before {
  content: counter(romanlist, lower-roman)". ";
  counter-increment: romanlist;
}

<ol>
  <li>Item 1</li>
  <li>
    Item 2
    <ol class="alpha">
      <li>Item A</li>
      <li>
        Item B
        <ol class="roman">
          <li>Item I</li>
          <li>Item II</li>
        </ol>
      </li>

      <li>Item C</li>
    </ol>
  </li>
  <li>Item 3</li>
  <li>Item 4</li>
</ol>

【讨论】：

感谢您的回复，我的问题是它在一个列表中，我需要将它放在代码中的一个列表中

【解决方案3】：

我会创建一个变量来将该 json 推送到其中。

var data = []; data.push({"Text": "This is 1","Number": "1."}); 然后我会做一个函数把它返回到屏幕上。您还必须展示一些工作，尝试一下并展示您正在尝试制作什么样的功能，MDN 是查找信息的好地方。

【讨论】：