How to get all elements with class in an array and send it to rest services?

Question

Here is my problem:

$(".Item").each(function(i, obj) {
    alert(i.id);
});

i tryed to get each element which class is "Item".

<div class="panel panel-default Item">
<div class="panel-body">
    <div class="col-md-4 col-xs-10">
        <h5 id="spikeName">{{spikeName}}</h5>
    </div>
    <div class="col-md-7 col-xs-10">
        <h5 id="spikeEffort">{{spikeEffort}} Tag/e</h5>
    </div>
    <div class="col-md-1 col-xs-1">
        <button type="button" class="btn btn-default" onclick="$(this).closest($({{item}})).remove()">
            <span class="glyphicon glyphicon-minus" aria-hidden="true"></span>
        </button>
    </div>
</div>

I need the spikeEffort and Name in a Array (json) to send it to my REST Services.

Any help please?

Java tag should be removed. [Java is not related to JavaScript](http://stackoverflow.com/questions/245062/whats-the-difference-between-javascript-and-java). — Michael, Dec 02 '16 at 11:32
on your each function, i think you need to use the obj.id and not i.id, i is the index, it will only give you like 0 , 1 , 2 and so forth — rule, Dec 02 '16 at 11:34
@rule the argument names are wrong, but they placed right, i will return the object and Obj will return the index. — Yan Mayatskiy, Dec 02 '16 at 11:42
@YanMayatskiy, i thought the same but then i tested it in a fiddle https://jsfiddle.net/yph9yc86/ , and it says the oposite — rule, Dec 02 '16 at 11:46

score 1 · Accepted Answer · answered Dec 02 '16 at 11:35

Use .find after you have found Item to dig further into the element.

$(".Item").each(function() {
        console.log($($(this).find('#spikeName')).html());
        //Send spikeName to rest API
        console.log($($(this).find('#spikeEffort')).html());
        //Send spikeEffort to rest API
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel panel-default Item">
<div class="panel-body">
    <div class="col-md-4 col-xs-10">
        <h5 id="spikeName">{{spikeName}}</h5>
    </div>
    <div class="col-md-7 col-xs-10">
        <h5 id="spikeEffort">{{spikeEffort}} Tag/e</h5>
    </div>
    <div class="col-md-1 col-xs-1">
        <button type="button" class="btn btn-default" onclick="$(this).closest($({{item}})).remove()">
            <span class="glyphicon glyphicon-minus" aria-hidden="true"></span>
        </button>
    </div>

score 0 · Answer 2 · answered Dec 02 '16 at 11:54

$arr=[];
$.each($('.Item'),function(index,object){
  $jsonobjcet ={
            'skipeName': $(object).find('#spikeName').text(), 
            'skipeEffort':$(object).find('#spikeEffort').text()
        }
  $arr.push($jsonobjcet);
});
console.log($arr)
// now you can send this array to web service

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel panel-default Item">
<div class="panel-body">
    <div class="col-md-4 col-xs-10">
        <h5 id="spikeName">{{spikeName}}</h5>
    </div>
    <div class="col-md-7 col-xs-10">
        <h5 id="spikeEffort">{{spikeEffort}} Tag/e</h5>
    </div>
    <div class="col-md-1 col-xs-1">
        <button type="button" class="btn btn-default" onclick="$(this).closest($({{item}})).remove()">
            <span class="glyphicon glyphicon-minus" aria-hidden="true"></span>
        </button>
    </div>
</div>

<div class="panel panel-default Item">
<div class="panel-body">
    <div class="col-md-4 col-xs-10">
        <h5 id="spikeName">{{spikeName}}</h5>
    </div>
    <div class="col-md-7 col-xs-10">
        <h5 id="spikeEffort">{{spikeEffort}} Tag/e</h5>
    </div>
    <div class="col-md-1 col-xs-1">
        <button type="button" class="btn btn-default" onclick="$(this).closest($({{item}})).remove()">
            <span class="glyphicon glyphicon-minus" aria-hidden="true"></span>
        </button>
    </div>
</div>

How to get all elements with class in an array and send it to rest services?

2 Answers2