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

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

我有一些 JSON 数据如下：

[
   {
      "facility_name":"Center A","process_delay":0,"lost_misplaced":7
   },{
      "facility_name":"Center B","lost_misplaced":6
   },{
      "facility_name":"Center C","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

解决方法

这是一个快速的。
使用 BootstrapVue，即 JavaScript（和 CSS）。
没有 jQuery。

layout.addWidget(cb4,1,4)

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",lost_misplaced:6
   },{
      facility_name:"Center C",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;
}

,

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

为滑块添加元素

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

使用 jQuery 添加元素

    var myObj = [
   {
      "facility_name":"Center A","process_delay":0,"lost_misplaced":7
   },{
      "facility_name":"Center B","lost_misplaced":6
   },{
      "facility_name":"Center C","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>'
  );
})

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