How do I structure an array within an .each loop using jQuery?

Question

I am using a .each loop to iterate over some div elements and grab the values of some input boxes contained within them. Each div represents a row and has an Id to signify this i.e. plot1, plot2.... I want to store all this data in an array but I'm not sure how to structure it. To give you an example of what I mean here is some code.

There are two divs that represent rows and each row has two input fields.

<div class="coords">
    <div id="plot1" class="plotrow">
        <div class="lat">
            <input type="text" id="plot1_lat" value="1234" />
        </div>
        <div class="long">
            <input type="text" id="plot1_long" value="4567" />
        </div>
    </div>
    <div id="plot2" class="plotrow">
        <div class="lat">
            <input type="text" id="plot2_lat" value="6984" />
        </div>
        <div class="long">
            <input type="text" id="plot2_long" value="2348" />
        </div>
    </div>
    <button type="button" id="go">Go!</button>
</div>

Using jQuery I want to iterate over these divs and store the data in an array using the following format.

{ "<value from div id>": [{ 
    "lat" : <<value from input>> 
    }, { 
    "long" : <<value from input>>
    }
]};

Here is my function which is triggered when you click on a buttonw ith an id of go

$('#go').on('click', function () {
        var object = {};
        var array = [];

        $('.coords input:text').each(function () {

            var someArray = {
                "plot": [{
                    "lat": this.value
                }, {
                    "long": this.value
                }]
            };
            array.push(someArray);
        });
    });

I'm a little confused over the array construction so I've put some dummy values in place but the "plot" should be the id from the div row and the lat and long should be the values of the two inputs within each div row.

Additionally I have found that because it's sitting within a .each loop it is create four arrays (one for each input) instead of one array with all the inputs organised by div id.

I hope that makes sense, can anyone offer some advice?

Is there any reason why you are storing lat and long in an array of objects? You can simply store them directly as keys of the plot object instead. — Terry
– Terry, Commented Sep 5, 2017 at 15:00

Rory McCrossan · Accepted Answer · 2017-09-05 15:00:45Z

To achieve what you require you can use map() to build an array from a HTML structure, like this:

var arr = $('.plotrow').map(function() {
  var o = {};
  o[this.id] = [
    { lat: $(this).find('.lat input').val() },
    { long: $(this).find('.long input').val() }
  ]
  return o;
}).get();

console.log(arr);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="coords">
  <div id="plot1" class="plotrow">
    <div class="lat">
      <input type="text" id="plot1_lat" value="1234" />
    </div>
    <div class="long">
      <input type="text" id="plot1_long" value="4567" />
    </div>
  </div>
  <div id="plot2" class="plotrow">
    <div class="lat">
      <input type="text" id="plot2_lat" value="6984" />
    </div>
    <div class="long">
      <input type="text" id="plot2_long" value="2348" />
    </div>
  </div>
  <button type="button" id="go">Go!</button>
</div>

I am presuming that the object structure you're building is required by some external plugin, as it can be simplified given your HTML structure.

Collectives™ on Stack Overflow

How do I structure an array within an .each loop using jQuery?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related