有没有办法在jQuery或JS中通过滑块或轮播显示JSON数据？

Question

我有一些 JSON 数据如下：

[
   {
      "facility_name":"Center A",
      "process_delay":0,
      "lost_misplaced":7
   },
   {
      "facility_name":"Center B",
      "process_delay":0,
      "lost_misplaced":6
   },
   {
      "facility_name":"Center C",
      "process_delay":0,
      "lost_misplaced":15
   }
]

我希望能够使用滑块或旋转木马显示这些数据。这样 JSON 数据中的滑块将采用以下格式：

Center A (process_delay)
Center A (lost_misplaced)

这样根据 JSON 数据，这就变成了：

Center A 0    NEXT SLIDER    Center B 0    NEXT SLIDE      Center C 0
Center A 7                   Center B 6                    Center C 15

Answer 1

使用这个简单的滑块 https://supersimpleslider.com/

为滑块添加元素

<div class="slider"></div>

使用 jQuery 添加您的元素

    var myObj = [
   {
      "facility_name":"Center A",
      "process_delay":0,
      "lost_misplaced":7
   },
   {
      "facility_name":"Center B",
      "process_delay":0,
      "lost_misplaced":6
   },
   {
      "facility_name":"Center C",
      "process_delay":0,
      "lost_misplaced":15
   }
]

$.each(myObj, function(i,v){
  $('.slider').append(
    '<div class="just_text">' + v.facility_name + " " + v.process_delay + "<br />" + v.facility_name + " " + v.lost_misplaced +  '</div>'
  );
})

考虑在值为空或错误数据时添加一些错误控制和条件

Answer 2

这是一个快速的。
使用 BootstrapVue，即 JavaScript (& CSS).
没有jQuery.

Vue.component('paragraph', {
  props: ['item', 'prop'],
  template: `<p><span v-text="item.facility_name"></span> (<span v-text="item[prop]"></span>)</p>`
})

new Vue({
  el: '#app',
  data: () => ({
    slide: 0,
    items: [{
      facility_name:"Center A",
      process_delay:0,
      lost_misplaced:7
   }, {
      facility_name:"Center B",
      process_delay:0,
      lost_misplaced:6
   }, {
      facility_name:"Center C",
      process_delay:0,
      lost_misplaced:15
   }]
  })
})

.carousel-item {
  height: 100vh;
  width: 100vw;
}
.carousel-caption:not(#_) {
  bottom: 50%;
  transform: translateY(50%);
  font-size: 1.5rem;
}
.carousel-caption p:last-child {
  margin-bottom: 0;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" >
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />
<script src="//polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>

<div id="app">
  <b-carousel v-model="slide" controls background="#ababab">
    <b-carousel-slide v-for="item in items"
                      :key="item.facility_name"
                      img-blank>
        <paragraph :item="item" prop="process_delay"></paragraph>
        <paragraph :item="item" prop="lost_misplaced"></paragraph>
    </b-carousel-slide>
  </b-carousel>
</div>

有没有办法在jQuery或JS中通过滑块或轮播显示JSON数据？

Is there a way to display JSON data through a slider or carousel in jQuery or JS?

javascript

jquery

carousel