Split Working For-loop Calling JSON In 2 Parts With Jquery/javascript

I have a working loop for a JSON call which loads the data.root.offer[0].region call into a div with class .region within another div .carousel It looks like this: $.getJSON('jso

Solution 1:

$(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>');
      };
    }); */

    //if diff classes

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Carousal 1<div class="carousel1" 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>
 Carousal 2   <div class="carousel2" tabindex="4">
            <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>

Solution 2:

A couple of things wrong with your code:

First, the json you provide is not valid (property region gets repited). Try this instead:

{
  "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"
      }
    ]
  }
}

Then, there are some issues in your js:

$.getJSON('json/data.json', function(data) {

      var regions = $('.carousel .region').length; 

      // wrong limit. data.root.offer[regions] does not exist. Try this instead:
      for (var i = 0; i < regions; i++) {

        // wrong selector. Be consistent and try this instead:
        $('.carousel .region').eq(i).html('<p>' + data.root.offer[i].region + '</p>');

      };

});

Also, you may want to use .each() instead to select and perform an operation over a bunch of elements, and you should protect your code from a short / non existent array. Like this:

$(function(){
    $.getJSON('http://beta.json-generator.com/api/json/get/LFdizev', function(data) {
      $('.carousel .region').each(function(i, el){
       try {
         $(this).html('<p>' + data.root.offer[i].region + '</p>');
       } catch (e) {
         // handle size mismatch
       }
      });
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Carousal 1<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>
 Carousal 2   <div class="carousel" tabindex="4">
            <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>