Question

我是javascript的新手，需要您的帮助。我不知道该怎么做以及如何使它起作用：我有以下js和html代码：

var slides = ''; 
var slideImg = slider.images; 
var i;
for (var i=0; i<slider.images.length; i++) {
    slides += '<div id="slide'+i+'" class="slideEl" ><img src="'+slider.images[i].src+'"><div class="container-images"><a href="'+slider.images[i].CTA.link+'" class="cta-btn '+slider.images[i].CTA.position+'">'+slider.images[i].CTA.text+'</a></div></div>';
}
document.getElementById('slides').innerHTML = slides;
document.getElementById('slides').style.width = window.innerWidth * (slideImg.length) + 'px'; 

document.getElementById('slides').style.transitionDuration = slideImg[0].speed + 's';
document.getElementById('slides').style.left = 0;

var indexSlide = 0; 
function moveSlide(params) {
    var slideWidth = document.getElementsByClassName('slideEl')[0].offsetWidth; 
    document.getElementById('slides').style.transitionDuration = slideImg[0].speed + 's';
    var element = document.getElementById('slides');
    var rect = element.getBoundingClientRect(); 
    var newPos = rect.left;
    if(params == 'right' && indexSlide < slideImg.length -1){ 
        newPos -= slideWidth;
        indexSlide++;
    } else if (params == 'left' && indexSlide > 0) {
        newPos += slideWidth;
        indexSlide--;
    }
    document.getElementById('slides').style.transitionDuration = slider.images[indexSlide].speed + 's';
    document.getElementById('slides').style.left = newPos + 'px';
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>JS exercise</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/png" href="media/favicon-32x32.png" />
    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
    <link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />
    
</head>
<body>
    <div id="slider">
        <div id="slides" class="slides"></div>
        <div class="container-slider">
            <span id="arrowLeft" class="arrow" onclick="moveSlide('left')">&lang;</span>
            <span id="arrowRight" class="arrow" onclick="moveSlide('right')">&rang;</span>
        </div>
    </div>
        <footer>Copyright © 2019</footer>

    <script language="javascript" src="js/script.js"></script> 
    <script type="text/javascript" src="js/data.json"></script>
    
</body>
</html>

此外，我还有另一个名为data.json的文件：

[{
    "autoplay" : "yes",
    "transition" : "slide",
    "images" :[
        {
            "src" : "https://some-img.jpg",                                                       
            "speed" : "1.5",
            "CTA" : { 
                "text" : "Join Now",
                "link" : "http://test.com",
                "position" : "bottom-right"
            }
        },
        {
            "src" : "https://some-img.jpg",                                                          
            "speed" : "1.5",
            "CTA" : { 
                "text" : "Join Now",
                "link" : "http://test.com",
                "position" : "bottom-right"
            }
        },
        {
            "src" : "https://some-img.jpg",                                                          
            "speed" : "1.5",
            "CTA" : { 
                "text" : "Join Now",
                "link" : "http://www.test.com",
                "position" : "bottom-right"
            }
        }
    ]
}]

如何仅将滑块的长度从json转换为javascript来定义整个滑块的长度？

编辑（答案）：

@Mrunmay Deswandikar，我已经在我的script.js文件的开头添加了这段代码：

var xhttp = new xmlhttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
     var data = JSON.parse(xmlhttp.responseText);
    }
  };
  xhttp.open("GET", "http://wip.2mo.ro/sandra/js-slider/js/data.json", true);
  xhttp.send();
  
var slides = ''; 
var slideImg = slider.images; 
.....

我收到此错误：未捕获的ReferenceError：未定义xmlhttpRequest 在script.js：1 （匿名）@ script.js：1

我想念什么？

非常感谢，

桑德拉

Answer 1

脚本标签不打算用于加载json数据。请改用fetch。

fetch('js/data.json')
.then(res=>res.json())
.then(data=>{
   const slider = data.shift();
   /** rest of your code here */
})
.catch(err=>{
  console.log(err.message);
});

默认情况下，抓取使用承诺，但是如果您更喜欢将其与async / await一起使用（Promises的语法糖）。

async function loadData(){
  const res = await fetch('/js/data.json');
  const data = await res.json();
  const slider = data.shift();
  /** rest of code here */
}

loadData().catch(err=>console.log(err);

Answer 2

要从json获取数据，请使用Ajax请求加载JSON文件。

var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
     var data = JSON.parse(xmlhttp.responseText);
    }
  };
  xhttp.open("GET", "data.json", true);
  xhttp.send();

这会将 data.json 文件的所有数据转换为变量 data 。如果您的data.json文件位于同一目录中，则可以使用相对路径，但是最好的方法是使用服务器路径，例如

xhttp.open("GET","https://yourwebsite/DIRECTORY/data.json",true);

如何定义一个从json到js的变量？

非常感谢，

2 个答案: