Как определить переменную из json в js?

Я новичок в 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"
            }
        }
    ]
}]

Как я могу получить ползунок var из 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; 
.....

Я получил эту ошибку: Uncaught ReferenceError: xmlhttpRequest не определен в script.js: 1 (анонимно) @ script.js:1

Что мне не хватает?

Большое спасибо,

Сандра

теги script не предназначены для загрузки данных json. Вместо этого используйте выборку.

— 24.02.2019 13:34

Вот несколько хороших примеров: developer.mozilla.org/en-US/docs/Web/API/Request

— 24.02.2019 13:36

javascript json

24.02.2019 13:31

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Ответы 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();

Это позволит получить все данные файла данные.json в переменную данные. Если ваш файл data.json находится в том же каталоге, в противном случае вы можете использовать относительный путь, но лучше всего будет использовать путь к серверу, например,

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

Так было пару лет назад

— 24.02.2019 13:42

Да, но для новичка это легко понять! Как и вопрос, она также сказала, что «я новичок в javascript».

— 24.02.2019 13:43

Я считаю, что fetch(url).then(r => r.json()) легче понять, и он делает то же самое, что и ваш код.

— 24.02.2019 13:48

Fetch — это просто приукрашивание xmlHttpRequest, под капотом они оба одинаковы.

— 24.02.2019 13:54

Идеально @SagarAgrawal

— 24.02.2019 14:00

24.02.2019 13:39

Теги скрипта не предназначены для загрузки данных json. Вместо этого используйте принести.

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

Fetch по умолчанию использует промисы, но если вы предпочитаете использовать его с async/await (синтаксический сахар для промисов).

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.info(err);

24.02.2019 13:39