jQuery looping through a nested ordered list and getting the index value of each element

Question

<ol id="author_list">
    <li id="author_8"><div class="author">Author 1</div>
        <ol>
            <li class="affiliation_7"><div class="affiliation">School1</div>
            </li>
            
            <li class="affiliation_8"><div class="affiliation">School2</div>
            </li>
        </ol>
    </li>
    <li id="author_10"><div class="author">Author 3</div>
        <ol>
            <li class="affiliation_7"><div class="affiliation">School1</div>
            </li>
        </ol>
    </li>
    <li id="author_9"><div class="author">Author 2</div>
        <ol>
            <li class="affiliation_8"><div class="affiliation">School2</div> 
            </li>
        </ol>
    </li>
</ol>

Which looks like this

enter image description here

I want to be able to loop through this list and store the exact position of the list in a json format so that I can reproduce the list in the same order later.

I'm not exactly sure how the json should look like but this is what I came up with. Not sure if this is the best way to store the data as well..

{
    "association1" : {
         "author": "author_8",
         "affiliation": {
             "affiliation_7": "0,0",
             "affiliation_8": "0,1"
         },
    "association2" : {
         "author": "author_10",
         "affiliation": {
             "affiliation_7": "1,0",
         },
    "association3" : {
         "author": "author_9",
         "affiliation": {
             "affiliation_8": "2,0",
         },       
}

My code so far

var indexList = [];
var level2 = $('#author_list li ol li')

level2.each(function() {
    var topIndex = $(this).index();
    var subIndex = $(this).parent().parent().index();
    indexList.push((topIndex, subIndex));    
    alert(indexList);
})

UPDATE

Just to clarify, the 0,0, 0,1 refer to the index values of School1 and School2 respectively under Author1 and so forth

what do the 0,0 and 0,1 and 1,0 represent?

ltiong_dbl
– ltiong_dbl

2012-05-08 06:19:44 +00:00
Commented May 8, 2012 at 6:19 — ltiong_dbl
– ltiong_dbl, Commented May 8, 2012 at 6:19
Hi, updated my question. Hope its clearer!

super9
– super9

2012-05-08 06:31:06 +00:00
Commented May 8, 2012 at 6:31 — super9
– super9, Commented May 8, 2012 at 6:31

thecodeparadox · Accepted Answer · 2012-05-08 07:35:40Z

2

var result = [];

function getList(element) {
    $.each($(element).children('li'), function() {
        var target = $(this),
            index = target.index(this) + 1,
            data = $(target).find('div.author').text(),
            eachObj = {};

        eachObj.author = data;

        if(target.has('ol')) {
            var aff = {};
            $.each($('ol li',  target), function() {
                aff[this.className] = $(this).find('div.affiliation').text();
            });     
        }
        eachObj.affiliation = aff;
        result.push(eachObj)
    });
    return result;
}

getList($('ol#author_list'));

DEMO

answered May 8, 2012 at 7:35

thecodeparadox

87.2k22 gold badges143 silver badges164 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ltiong_dbl · Accepted Answer · 2012-05-08 07:15:09Z

1

You don't really need the index values of the schools in order to reconstruct the list as you have the relative positions of the schools captured in the JSON structure.

Here's some JQuery code that will build the JSON loosely based on Imdad's schema:

var authors = [];
$('#author_list > li').each(function(){
  var author = {};
  author.id = $(this).attr('id').substring(7);
  author.name = $(this).find('div.author').text();

  author.schools = [];
  $(this).find('ol li').each(function(){
    var school = {};
    school.sid = $(this).attr('class').substring(12);
    school.name = $(this).find('div.affiliation').text();
    author.schools.push(school);
  });

  authors.push(author);
});

var authorsJson = JSON.stringify(authors);
console.log(authorsJson);

Formatted results look like:

[
  {
    "id":"8",
    "name":"Author 1",
    "schools":[
      {"sid":"7","name":"School1"},
      {"sid":"8","name":"School2"}
    ]
  },
  {
    "id":"10",
    "name":"Author 3",
    "schools":[
      {"sid":"7","name":"School1"}
    ]
  },
  {
    "id":"9",
    "name":"Author 2",
    "schools":[
      {"sid":"8","name":"School2"}
    ]
  }
]

answered May 8, 2012 at 7:15

ltiong_dbl

3,21627 silver badges28 bronze badges

1 Comment

super9 Over a year ago

I went with your solution in the end with a tweaks. I didn't want to use the substring method so I added a custom attribute to the li of author and affiliation such that I'm doing this instead: author.id = $(this).attr('author'). Thanks for your help!

Imdad · Accepted Answer · 2012-05-08 06:24:00Z

1

Its simple. The way you display it is the way it should be stored. And Keeping Ids separate makes it more flexible.

[
{
 "author": { "id":8, "name":"Author 3"},
 "schools":[ {"affilication":7,      "school":"School 1"},
             {"affilication":8,      "school":"School 2"}
           ]
},
{
 "author": { "id":10, "name":"Author 3"},
 "schools":[ {"affilication":7,      "school":"School 1"}     ]
},
{
 "author": { "id":9, "name":"Author 2"},
 "schools":[ {"affilication":8,      "school":"School 2"}     ]
}
]

answered May 8, 2012 at 6:24

Imdad

6,0424 gold badges37 silver badges53 bronze badges

Collectives™ on Stack Overflow

jQuery looping through a nested ordered list and getting the index value of each element

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related