Numbering is reversed when iterating json data with jQuery's each

Numbering is reversed when iterating json data with jQuery's each

By : Robledo Pazotto
Date : November 14 2020, 04:51 PM
With these it helps Cache the question and answer DIVs in a variable outside of the outer $.each loop and insert the html at once after the the $.each loop. Also it's a best practice to modify the DOM elements at once rather than inside a loop.
code :
var html;
var pno = 0;
var qWithA='';
$.each(data.results, function (i, r) {
    pno += 1;

    html = '<div class="questions"><h3 class="quest">' + pno + '&nbsp;' +
        r.QuestionText + '</h3><ul>';

    $.each(r.Answers, function (i, ans) {
        html += '<li>' + ans.AnswerLabel + '&nbsp;<input type="radio" data-question="' + ans.QuestionId + '" name="answer" value="' + ans.AnswerId + '"/>' + ans.AnswerText + '</li>';

    html += '</ul><input type="submit" style="float:left"  value="Previous" class="orange-button prev">' +
    '<input type="submit" value="Next >>" class="orange-button next"></div>'
    qWithA += html;

Share : facebook icon twitter icon
JSON data won't be displayed via jQuerys getJSON()

JSON data won't be displayed via jQuerys getJSON()

By : Praditha
Date : March 29 2020, 07:55 AM
I wish did fix the issue. The following code should display the id out of the JSON-object, which I got from a server. I cant find the mistake, could somebody help me? Thank you in advance! , You should do
code :
    $('#content').append('<p>ID: ' + this.id+ '</p>');
$(function() {
   var url = "http://localhost:8387/nscalemc/rest/mon/resourcestatus.json";

    $.getJSON(url+'?callback=?', function(data) {
        $(data.groupStatus).each(function() {
            $('#content').append('<p>ID: ' + this.id+ '</p>');
AngularJS reversing a list of items shows non-reversed index numbering

AngularJS reversing a list of items shows non-reversed index numbering

By : user2147799
Date : March 29 2020, 07:55 AM
should help you out $index is simply going through the items in the loop. It is not aware of the reversal. You could have an "id" element in queries, such as:
code :
var queries = [
  { title: "Query type A", body: "Response of query type A", id:1 },
  { title: "Query type B", body: "Response of query type B", id:2 },
  { title: "Query type C", body: "Response of query type C", id:3 }
How do I prevent json data getting reversed when using for loop?

How do I prevent json data getting reversed when using for loop?

By : Anu Shrivastava
Date : March 29 2020, 07:55 AM
may help you . First of all you doing the backward step wrong. You are counting down index = index - 1; so everything will be reverse.
On the other hand, you are not using clean structured code. In your case you do something and then try to debug and change it as long as you need to do your needs. Especially not changing the links too.
code :
// encapsulate frontend stuff. here create some html as clean it can be.
function createListElements(data, index, end){     
    var output = '';
    while(index < end) {
        output += '<li class="news-post"><a href="' + data.Data[index].Url + '" data-tag="exclusive">' + data.Data[index].Subject + '</a></li>';
        index +=  1;
    return '<ul>' + output + '</ul>';
// do update the view - in this case, change everything under ".news-array"
function updateView(data, elementPerView, index){    
    var begin = Math.max(0, index);
    var end = Math.min(data.Data.length, begin + elementPerView); 
    $('.news-array').html( createListElements(data, begin, end) );
    return begin;
// frontend button handler
function buttonHandler(data) {
    var index = 0;
    updateView(data, elementPerView, index);
        // sorry, we need one look ahead
        if (index + elementPerView < data.Data.length)
            index = updateView(data, elementPerView, index + elementPerView);
        return false;
        index = updateView(data, elementPerView, index - elementPerView);
        return false;

var elementPerView = 4; // be flexible - 4 is a good example for 15 elements

// do some ajax - not mixed up with callback-code
    async: true,
    url: 'https://api.myjson.com/bins/2nqki',
    data: '',
    accepts: 'application/json',
    dataType: 'json',
    success: buttonHandler
parsed json data sorting reversed

parsed json data sorting reversed

By : Ivan Sanabria
Date : March 29 2020, 07:55 AM
To fix this issue The issue is because in each iteration you insert the new option element direct after() the first one, and therefore in front of any previous added.
To fix this, instead call append() on the select itself:
code :
// dummy AJAX data
var item = {
  "items": [{
    "key": "First",
    "value": 100
  }, {
    "key": "Second",
    "value": 200
  }, {
    "key": "Last",
    "value": 300

// in AJAX callback
$.each(item['items'], function(i, n) {
  var option = '<option value="' + n['value'] + '">' + n['key'] + '</option>';
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <option id="show-data" value="" selected disabled>Please select an item</option>
var options = '';
$.each(item['items'], function(i, n) {
  options += '<option value="' + n['value'] + '">' + n['key'] + '</option>';
Reversed numbering of list combined with brackets

Reversed numbering of list combined with brackets

By : user3215443
Date : March 29 2020, 07:55 AM
it helps some times Expanding on the initial comment, here's a CSS+JS solution:
code :
<ol reversed class="bracket">
  <li>First item</li>
  <li>Second item</li>
<ol reversed class="bracket">
  <li>First item</li>
  <li>Second item</li>
  <li>third item</li>
  <li>fourth item</li>
  <li>fifth item</li>
  .forEach(list => {
    const c = list.querySelectorAll('li').length + 1;
    list.style.counterReset = `list ${c}`;
ol.bracket>li {
  list-style: none;
  position: relative;

ol.bracket>li:before {
  counter-increment: list -1;
  content: "[" counter(list) "]  ";
  position: absolute;
  left: -2em;
Related Posts Related Posts :
  • grab non-sibling element with jquery
  • Select a word and click it
  • Trigger modal instead redirect to /users/sign_in path, Rails 4 with devise
  • Combining Parent theme JS and CSS
  • Angular ui-grid - DropDown Selection shows Id
  • jquery addclass when there is content on body
  • JQUERY : CSS does not apply to dynamically created elements
  • Bootstrap multiselect dropdown checkbox not working on paginated table
  • JQuery scroll to dynamic id
  • Jquery first time tried ajax
  • Disable the link on the active tab (Bootstrap)
  • How to handle this validation when a div is added?
  • how to show/hide and check/uncheck checkboxes dynamically inside kendo grid
  • Conditional parameters for AJAX function
  • Jquery add class to input checkbox field
  • Bootstrap countdown timer Jquery
  • Open the closest modal of jQuery clicked element
  • change background color of specific button on click
  • Can I create link as post to 3rd party site and open in new tab?
  • ID is 'undefined' using .each()
  • Using .each() for targeting each child differently in Jquery
  • How to return data from functions in function
  • Execute this jquery only when viewport is bigger than
  • Bootbox showing white box behind dialog
  • Toggle multiple classes with prevAll(), nextAll(), slice(), and duplicate classes... better way?
  • Show/hide list items and add more/less link
  • Going through all occurences of class on slider change
  • Call jQuery valid() without updating the screen
  • hide and show ActionLink and save data in database - MVC
  • Pass each object in JSON array to query
  • Toggling content div on one-page site with jQuery
  • Foundation Equalizer is setting height to inherit?
  • carousel navigation each function
  • changing color of text color with input slider
  • jquery: filter using AND OR in selector
  • Call a function If any Item is chosen From select box , After Dom update
  • Target class within a jquery object
  • How to scroll a web page with fixed navigation bar just before arrive to a section or div?
  • How to add a class name to a specific selector
  • How to prevent background scrolling
  • How can I disable previous/next in OwlCarousel2 if there aren't enough items to scroll?
  • How to pass products and quantities to ASP.NET MVC4 Web API from form submit
  • jQuery css3 attribute not working
  • WordPress One Page Style Menus Scrolling
  • jquery.unobtrusive-ajax.js is not capturing the Submit event
  • Uncaught SyntaxError: Failed to execute 'postMessage' on 'Window': Invalid target origin '' in a call to 'postMessage'
  • can't get correct checkbox value
  • jquery tooltipster plugin, hide all tips?
  • How to set 3 different colors at jQuery UI Slider
  • How to convert a string to html and add a event, descard after use?
  • How can I make jQuery wait for div display value to change to "block", then make ajax call?
  • Stellar.js giving uncaught type error
  • Saving form data to local storage and show it on refresh
  • Jquery carousel not being implemented
  • Use modal with external URL body and dynamic links from data attribute
  • Looking to simplify my jquery
  • Bootstrap datepicker query?
  • Navbar/header animated change on scroll
  • Bootstrap paginated table sending only 10 row's data to server
  • Bootstrap 3.0 & NiceScroll 3.5.0
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org