Adding extra values to JS Object

Question

Ok I have an HTML list containing the data I need. It looks like this

ul
    li[data-trainer]>trainee
    li[data-trainer]>trainee
    li[data-trainer]>trainee

I iterate it and want to make an object that looks like this

{
    "Trainer":{0:Trainee1},
    "Trainer2":{1:Trainee2,2:Trainee3,3:Trainee4}
}

I tried this and a bunch more

var Data = new Object();
var i = 0;
$(".blah-blah-ul li.active").each(function(){
    i++;
    var trainer = $(this).attr("data-trainer");
    var trainee = $(this).text();
    Data[trainer] = {};
    Data[trainer][i] = trainee;
})
console.log(Data);

Data[trainer][i] = trainee leaves me with only the last trainee in the list.

Data from console.log:

Object
    Trainer1: Object
        2: Trainee2
    Trainer3: Object
        4: Trainee6

I tried making an array and using push or making a string but that didn't work.

If someone could please recommend a proper solution, it would be greatly appreciated.

Here's the HTML

<ul class="blah-blah-ul">
    <li class="active" data-trainer="Trainer1">Trainee1</li>
    <li class="active" data-trainer="Trainer1">Trainee2</li>
    <li data-trainer="Trainer2">Trainee3</li>
    <li data-trainer="Trainer2">Trainee4</li>
    <li class="active" data-trainer="Trainer3">Trainee5</li>
    <li class="active" data-trainer="Trainer3">Trainee6</li>
</ul>

I find it hard to understand how you get that kind of object from that kind of html structure. Can you please paste the real HTML or explain the situation you are in and what you are trying to achieve — Iliya Reyzis
– Iliya Reyzis, Commented May 3, 2015 at 23:13
@IliyaReyzis - .text would be the contents between the greater and less than signs. ...>here<..., while data-trainer is a custom attribute inside the tag like src or alt. — Kraang Prime
– Kraang Prime, Commented May 3, 2015 at 23:16
@SanuelJackson Yeah, hats pretty abusive. I'm just trying to get the REAL html structure and the desired result. — Iliya Reyzis
– Iliya Reyzis, Commented May 3, 2015 at 23:20

Kraang Prime · Accepted Answer · 2015-05-03 23:47:42Z

2

Your problem was in order to have more than one value assigned to the element in the array, the sub element must be an array. This allows for adding multiple Trainee to the Trainer item in the Data object.

var Data = new Object();
var i = 0;
$(".blah-blah-ul li.active").each(function(){
    i++;
    var trainer = $(this).attr("data-trainer");
    var trainee = $(this).text();
    if(typeof Data[trainer] === 'undefined') {
       Data[trainer] = {}; 
    }
  
    Data[trainer][i] = {trainee};
})
console.log(Data);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="blah-blah-ul">
    <li class="active" data-trainer="Trainer1">Trainee1</li>
    <li class="active" data-trainer="Trainer1">Trainee2</li>
    <li data-trainer="Trainer2">Trainee3</li>
    <li data-trainer="Trainer2">Trainee4</li>
    <li class="active" data-trainer="Trainer3">Trainee5</li>
    <li class="active" data-trainer="Trainer3">Trainee6</li>
</ul>

Documentation on Javascript Arrays using Push, can be found here w3schools

edited May 3, 2015 at 23:47

answered May 3, 2015 at 23:15

Kraang Prime

10.6k11 gold badges66 silver badges133 bronze badges

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

5 Comments

Kraang Prime Over a year ago

just realized i was declaring the opening array as Object() when it should have been {}

Иван Божков Over a year ago

The data-trainer attribute is the same for some li's because they're coming from the same trainer.

Kraang Prime Over a year ago

Gotcha. Let me revise.

Kraang Prime Over a year ago

Finished, the result is an array of Trainee's under each Trainer.

Иван Божков Over a year ago

Argh, finally! You're a life saver!

braks · Accepted Answer · 2015-05-03 23:17:11Z

0

var Data = {};
var i = 0;
$(".blah-blah-ul li.active").each(function(){
    i++;
    var trainer = $(this).attr("data-trainer");
    var trainee = $(this).text();
    Data[trainer] = {};
    Data[trainer][i] = trainee;
})
console.log(Data);

answered May 3, 2015 at 23:17

braks

1,62818 silver badges25 bronze badges

2 Comments

Иван Божков Over a year ago

it still leaves me with the last trainee only :(

Kraang Prime Over a year ago

Almost, the problem you are having is every loop, you are re-initializing the array for Data[trainer], which effectively clears any prior data which may have been stored.

Community · Accepted Answer · 2017-05-23 12:31:41Z

0

Try the following approach:

Data[trainer][i] = trainee;

and you can find more info here: How can I add a key/value pair to a JavaScript object?

edited May 23, 2017 at 12:31

CommunityBot

11 silver badge

answered May 3, 2015 at 23:15

Evgeni Atanasov

5201 gold badge6 silver badges15 bronze badges

1 Comment

aug Over a year ago

Data.trainer.i would not work because it needs to be dynamic to i and to trainer. It would literally look for them as keys.

Collectives™ on Stack Overflow

Adding extra values to JS Object

3 Answers 3

5 Comments

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related