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个项目加载到带有.region类的8个div中。但没有成功..如果有人知道一个真正有用的解决方案。

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>

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

1 个答案: