How can I access an element of an array in JQUERY?

Question

I'm new in JQUERY and trying AJAX.I need to access the array so i can put the element on my html table. btw the array comes from my backend.

the elements in the data array are:

[1990, "098765", "094561", "098123", "097612"]

I tried the usual way but it wont work, How to do it right? really need help

my Jquery code:

 $('#trigger').click(function(){
            var send = $('#myselect').val();
            $.ajax({

                data:{
                  sent: send
                },
                type: 'POST',
                url: '/delinquincy'
            })
            .done(function(data){
              console.log(data)
              var q1=data[1]
              var q2=data[2]
              var q3=data[3]
              var q4=data[4]

              $('#q1').html(q1)
              $('#q2').html(q2)
              $('#q3').html(q3)
              $('#q4').html(q4)
            })
          })

This is where I put the elements of the array,

my HTML Table:

<table class="table table-bordered" id="subtable">
              <thead>
                  <tr>
                    <th scope="col">Quarter</th>
                    <th scope="col">O.R.number</th>
                    <th scope="col">Action</th>
                  </tr>
              </thead>
              <tbody>
                <tr>
                  <td>1st Quarter</td>
                    <td id="q1"> </td>
                    <td><button type="button" class="btn btn-primary subbutton" data-toggle="modal" data-target="#submodal" id="pay" data-row-val="" >Pay</button></td>
                </tr>

                <tr>
                  <td>2nd Quarter</td>
                    <td id="q2"> </td>
                    <td><button type="button" class="btn btn-primary subbutton" data-toggle="modal" data-target="#submodal" id="pay" data-row-val="" >Pay</button></td>
                </tr>

                <tr>
                  <td>3rd Quarter</td>
                    <td id="q3"> </td>
                    <td><button type="button" class="btn btn-primary subbutton" data-toggle="modal" data-target="#submodal" id="pay" data-row-val="" >Pay</button></td>
                </tr>

                <tr>
                  <td>4th Quarter</td>
                    <td id="q4"> </td>
                    <td><button type="button" class="btn btn-primary subbutton" data-toggle="modal" data-target="#submodal" id="pay" data-row-val="" >Pay</button></td>
                </tr>

              </tbody>
            </table>

What is the result of conolse log? Do you have any errors or whatever? — Iaroslav
– Iaroslav, Commented Jan 4, 2018 at 7:56
When I console.log(q1) the result is another element but not from the data array — Emman Lopez Telewik
– Emman Lopez Telewik, Commented Jan 4, 2018 at 8:03
developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… — Mohammad
– Mohammad, Commented Jan 4, 2018 at 8:29

davidkonrad · Accepted Answer · 2018-01-04 08:01:09Z

3

Since you have no dataType set on the request, the response will always come as a string, not as a ready to use javascript array. Use

data = JSON.parse(data)

before

$('#q1').html( data[0] )

or add

dataType: "json",

to your AJAX request.

answered Jan 4, 2018 at 8:01

davidkonrad

85.7k17 gold badges211 silver badges273 bronze badges

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

Collectives™ on Stack Overflow

How can I access an element of an array in 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