javascript - 如何从json到js定义一个var？-6ren

javascript - 如何从json到js定义一个var？

转载作者：行者123 更新时间：2023-11-28 17:09:29

我是 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"
            }
        }
    ]
}]

如何将 slider 变量从 json 转换为 javascript 以定义整个 slider 的长度？

编辑(来自答案):

@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

我错过了什么？

非常感谢，

桑德拉

最佳答案

脚本标签不适合用于加载 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);
});

默认情况下，Fetch 使用 Promise，但如果您更喜欢将其与 async/await(Promise 的语法糖)一起使用。

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

关于javascript - 如何从json到js定义一个var？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54851896/