为 AJAX JSON 调用创建一个 for-loop / .each 循环

Question

我有一个有效的 JSON 调用，它将 data.root.offer[0].region 调用加载到类 .region 的 div 中。它看起来像这样：

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

这是我尝试过但没有奏效的方法

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

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

我一直在尝试创建一个循环，将报价数组中的 8 个项目加载到 8 个 div 中，并使用循环使用 .region 类。但没有成功..如果有人知道真正有用的解决方案。

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>

Answer 1

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

下面的工作示例

   
$(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>