Формата нумерованного список JSON в HTML

Question

У меня есть данные, что я возвращаюсь в 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> 

Какой функции/code Мне нужно добавить, что данные должны быть отступом в соответствии с цифрами/буквами? Я хочу, чтобы страница HTML выглядеть следующим образом:

Спасибо

Answer 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); 

Answer 2

Я хотел бы сделать переменную, чтобы подтолкнуть этот JSON в нем.

var data = []; data.push({"Text": "This is 1","Number": "1."}); , а затем я бы сделал функцию, чтобы вернуть его на экран. вам также нужно показать какую-то работу, попробовать и показать, какую функцию вы пытаетесь сделать, MDN - это хорошее место для поиска информации.

Answer 3

Вот как это сделать в 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>