How to sort data with javascript each()

Question

I have html code with data from database. I need to update this data via AJAX, so users get the new currency rates without page refresh. Here's Laravel blade template:

@foreach ($currencies as $currency)
    <div class="currency-{{ $currency->id }}">
        <div class="cur-id">{{ $currency->id }}</div>
        <div class="cur-name">{{ $currency->cur_name }}</div>
        <div class="cur-sell">{{ $currency->cur_sell + 0 }}</div>
        <div class="cur-buy">{{ $currency->cur_buy + 0 }}</div>
    </div>
@endforeach

Once the page is loaded - it has actual data, but after 1 minute this data being refreshed, so i am firing an AJAX request every minute:

$.ajax({
    type: 'GET',
    url: '/ajax-currencies',
    dataType: 'json',
    success: function (data) {
        $.each(data, function(index, element) {
            $('.currency-+element.id+.cur-sell').text(element.cur_sell);
        });
    }
});

"/ajax-currencies" responses with json objects. How can i put each object with its values in to correct div - currency-1 (has own values), currency-2 (has own values) etc, so it looks like this:

<div class="currency-1">
  <div class="cur-id">1</div>
  <div class="cur-name">Bitcoin</div>
</div>

<div class="currency-2">
  <div class="cur-id">2</div>
  <div class="cur-name">Ethereum</div>
</div>

Well, you wouldn't use each to sort, you would use sort. Then to output the data, you would use each — A. L
– A. L, Commented May 27, 2017 at 7:31
Your response is array of objects probably. So sort should work — u_mulder
– u_mulder, Commented May 27, 2017 at 7:38
Or you can sort items on server and pass already sorted array. — u_mulder
– u_mulder, Commented May 27, 2017 at 7:39

u_mulder · Accepted Answer · 2017-05-27 07:50:18Z

1

I don't know why you need any kind of sorting. If your divs have special classes, then you can find divs by these classes and insert data directly in these divs. You're already trying to do this, but incorrect. Your each callback should be:

function(index, element) {
    $('.currency-' + element.id + ' .cur-sell').text(element.cur_sell);
    // alternative version     
    //$('.currency-' + element.id).find('.cur-sell').text(element.cur_sell);
}

See, I moved element.id out of quoted string, as javascript cannot parse variables inside quoted strings.

I also added a space between classes in selector, because selector like .class1.class2 will try to find item with both classes applied, which you don't want.

Also, I added alternative selector using find() method. Just for example.

Now the selector should select correct div.

edited May 27, 2017 at 7:50

answered May 27, 2017 at 7:44

u_mulder

54.8k5 gold badges54 silver badges72 bronze badges

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

4 Comments

Alexander Kim Over a year ago

i forgot about the quotes, thank you. Also one more thing - can't i do element.cur_sell + 0 in order to avoid unneeded zeros?

u_mulder Over a year ago

Not clear what you try to achieve with element.cur_sell + 0.

Alexander Kim Over a year ago

Trying to remove unnecessary zeros. Like 4.800000

u_mulder Over a year ago

Not sure how it works, but if it works correctly - then you can do it.

Collectives™ on Stack Overflow

How to sort data with javascript each()

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related