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>');
      }
    });
  
});

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Carousal 1<divclass="carousel1"tabindex="4"><divclass="frame"><divclass="region"><p>miami beach1<p></div></div><divclass="frame"><divclass="region"><p>miami beach2<p></div></div><divclass="frame"><divclass="region"><p>miami beach3<p></div></div><divclass="frame"><divclass="region"><p>miami beach4<p></div></div></div>
 Carousal 2   <divclass="carousel2"tabindex="4"><divclass="frame"><divclass="region"><p>miami beach5<p></div></div><divclass="frame"><divclass="region"><p>miami beach6<p></div></div><divclass="frame"><divclass="region"><p>miami beach7<p></div></div><divclass="frame"><divclass="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
       }
      });
    });
});

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