making a for-loop / .each loop for AJAX JSON call

Question

I have a working JSON call which loads the data.root.offer[0].region call into a div with class .region. It looks like this:

$.getJSON('json/data.json', function(data) {
  $('.region').html('<p>' + data.root.offer[0].region + '</p>'
    )
});

Here's what I tried and didn't work

for (var i = 0; i <= carousel.length; i++) {

$.getJSON('json/data.json', function(data) {
  $('.region').html =+ ('<p>' + data.root.offer[i].region + '</p>'
    )
});
};

I have been trying to create a loop that loads the 8 items in the offer array into 8 divs with the .region class using a loop. but no success.. If anybody knows a solution that be really helpful.

JSON

{"root": {"offer": [{"region": "Miami - Miami Beach",
                     "region": "Mexico - Playacar",
                     "region": "Cuba - Veradero",
                     "region": "Jamaica - Montego Bay",
                     "region": "Dominican Republic - Bavaro",
                     "region": "Turkije - Belek",
                     "region": "Turkije - Belek",
                     "region": "Turkije - Side",
                     "region": "Tunesië - Hammamet Yasmine ",
                     "region": "Egypte - Sharm El Sheikh"
}]}}

HTML:

<div class="carousel" tabindex="4">
        <div class="frame">
            <div class="region">
                <p>miami beach1<p>
            </div>
        </div>
        <div class="frame">
            <div class="region">
                <p>miami beach2<p>
            </div>
        </div>
        <div class="frame">
            <div class="region">
                <p>miami beach3<p>
            </div>
        </div>
        <div class="frame">
            <div class="region">
                <p>miami beach4<p>
            </div>
        </div>
        <div class="frame">
            <div class="region">
                <p>miami beach5<p>
            </div>
        </div>
        <div class="frame">
            <div class="region">
                <p>miami beach6<p>
            </div>
        </div>
        <div class="frame">
            <div class="region">
                <p>miami beach7<p>
            </div>
        </div>
        <div class="frame">
            <div class="region">
                <p>miami beach8<p>
            </div>
        </div>
</div>

yet another calling AJAX in for loop problem. please refer to http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-asynchronous-call — vinayakj, Jun 27 '15 at 15:10

vinayakj · Accepted Answer · 2015-06-27T15:30:10.250

JSON

{"root": {"offer": [{"region": "Miami - Miami Beach"},
                     {"region": "Mexico - Playacar"},
                     {"region": "Cuba - Veradero"},
                     {"region": "Jamaica - Montego Bay"},
                     {"region": "Dominican Republic - Bavaro"},
                     {"region": "Turkije - Belek"},
                     {"region": "Turkije - Belek"},
                     {"region": "Turkije - Side"},
                     {"region": "Tunesië - Hammamet Yasmine "},
                     {"region": "Egypte - Sharm El Sheikh"}]
    }
}

Javascript

$.getJSON('http://beta.json-generator.com/api/json/get/Fx2DlmM', function(data) {
      var regions = $('.carousel .region').length;
      for (var i = 0; i <= regions; i++) {
        $('.region').eq(i).html('<p>' + data.root.offer[i].region + '</p>');
      };
});

A working sample below

   
$(function(){
   $.getJSON('http://beta.json-generator.com/api/json/get/Fx2DlmM', function(data) {
      var regions = $('.carousel .region').length;
      for (var i = 0; i <= regions; i++) {
        $('.region').eq(i).html('<p>' + data.root.offer[i].region + '</p>');
      };
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="carousel" tabindex="4">
        <div class="frame">
            <div class="region">
                <p>miami beach1<p>
            </div>
        </div>
        <div class="frame">
            <div class="region">
                <p>miami beach2<p>
            </div>
        </div>
        <div class="frame">
            <div class="region">
                <p>miami beach3<p>
            </div>
        </div>
        <div class="frame">
            <div class="region">
                <p>miami beach4<p>
            </div>
        </div>
        <div class="frame">
            <div class="region">
                <p>miami beach5<p>
            </div>
        </div>
        <div class="frame">
            <div class="region">
                <p>miami beach6<p>
            </div>
        </div>
        <div class="frame">
            <div class="region">
                <p>miami beach7<p>
            </div>
        </div>
        <div class="frame">
            <div class="region">
                <p>miami beach8<p>
            </div>
        </div>
</div>

you need to ask that in separate question, I guess above answer answers your original question right? Anyways then have to for loops to iterate through, actually it more depends how you render your two carousal with what classes each — vinayakj, Jun 27 '15 at 16:03
yes for sure thanks alot! I'll make up a new question for that. — Mathias Van der brempt, Jun 27 '15 at 16:05
Can you take a look at [http://stackoverflow.com/questions/31091224/split-working-for-loop-calling-json-in-2-parts-with-jquery-javascript?noredirect=1#comment50199068_31091224)(http://stackoverflow.com/questions/31091224/split-working-for-loop-calling-json-in-2-parts-with-jquery-javascript?noredirect=1#comment50199068_31091224) — Mathias Van der brempt, Jun 27 '15 at 17:10

making a for-loop / .each loop for AJAX JSON call

1 Answers1