Turn inputs into objects in an array with a loop

Question

how do I turn this

 <input class="optionsGraph" name="name1" value="value1">
 <input class="optionsGraph" name="name2" value="value2">
 <input class="optionsGraph" name="name3" value="value3">
 <input class="optionsGraph" name="name4" value="value4">
 <input class="optionsGraph" name="name5" value="value5">

into this (with a loop)?

var example = [
            { label: "name1",  y: value1, x: 1  },
            { label: "name2", y: value2, x: 2  },
            { label: "name3", y: value3, x: 3  },
            { label: "name4",  y: value4, x: 4  },
            { label: "name5",  y: value5, x: 5  }
          ];

I was thinking with something like this?

$(".optionsGraph").each(function(key) {
           //another loop

          });

I'm really struggling with this

Satpal · Accepted Answer · 2017-05-09 13:19:55Z

3

You can use .map() along with .get()

As the return value is a jQuery object, which contains an array, it's very common to call .get() on the result to work with a basic array.

var arr = $('.optionsGraph').map(function(index) {
  return {
    label: $(this).attr('name'), //Get attribute
    y: $(this).val(), //Get elements value
    x: index + 1
  }
}).get();

console.log(arr)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="optionsGraph" name="name1" value="value1">
<input class="optionsGraph" name="name2" value="value2">
<input class="optionsGraph" name="name3" value="value3">
<input class="optionsGraph" name="name4" value="value4">
<input class="optionsGraph" name="name5" value="value5">

edited May 9, 2017 at 13:19

answered May 9, 2017 at 13:12

Satpal

134k13 gold badges168 silver badges171 bronze badges

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

2 Comments

DigiFriend Over a year ago

What does .get() do here?

Satpal Over a year ago

map() returns jQuery object, to get basic array you need .get() @DigiFriend

Suresh Atta · Accepted Answer · 2017-05-09 13:14:39Z

1

Adding a line to your loop.

var output =[];
$(".optionsGraph").each(function(key) {
    output.push({label : $(this).attr("name"), y: $(this).val(), x : key+1 );
});

https://jsfiddle.net/La25kkqz/

answered May 9, 2017 at 13:14

Suresh Atta

122k38 gold badges206 silver badges315 bronze badges

Comments

zerek · Accepted Answer · 2017-05-09 13:12:45Z

0

Try this :

var res = [], i = 0;
$(".optionsGraph").each(function(key) {
           //another loop
        res.push({
        label: $(this).attr('name'),
      y : $(this).val(),
      x: ++i
    });
});

https://jsfiddle.net/8qqphkpf/

answered May 9, 2017 at 13:12

zerek

2531 silver badge12 bronze badges

Comments

kind user · Accepted Answer · 2017-05-09 13:13:56Z

0

Pure js solution, using Array#map.

var elems = document.getElementsByClassName('optionsGraph'),
    res = Array.from(elems).map((v,i) => ({label: v.name, y: v.value, x: i+1}));
    
    console.log(res);

<input class="optionsGraph" name="name1" value="value1">
<input class="optionsGraph" name="name2" value="value2">
<input class="optionsGraph" name="name3" value="value3">
<input class="optionsGraph" name="name4" value="value4">
<input class="optionsGraph" name="name5" value="value5">

answered May 9, 2017 at 13:13

kind user

42k8 gold badges69 silver badges78 bronze badges

Comments

prasanth · Accepted Answer · 2017-05-09 13:14:05Z

0

Try this Array#push

var example=[]
$(".optionsGraph").each(function(a,b) {
example.push({label:$(this).attr('name'),  y:$(this).val(), x: a+1})
 });
 console.log(example)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="optionsGraph" name="name1" value="value1">
 <input class="optionsGraph" name="name2" value="value2">
 <input class="optionsGraph" name="name3" value="value3">
 <input class="optionsGraph" name="name4" value="value4">
 <input class="optionsGraph" name="name5" value="value5">

answered May 9, 2017 at 13:14

prasanth

22.6k4 gold badges33 silver badges57 bronze badges

Collectives™ on Stack Overflow

Turn inputs into objects in an array with a loop

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related