使用JavaScript将具有数组的JSON文件上传到不同的选项卡中

Posted 2021-05-03

[我有W3学校的html模板，带有标签-https://www.w3schools.com/howto/howto_js_tabs.asp和此图库-https://www.w3schools.com/howto/howto_js_slideshow.asp。我想上传一个具有不同数组的JSON文件。我尝试了不同的方法，但是没有任何效果。我是使用JSON文件的新手，但是有使用javascript的一点经验。我想要单击按钮之一以显示JSON数组之一。但是它只在我第一次打开文件时显示，然后什么都没有显示。我只想使用Vanilla JavaScript。我没有在问题中包含CSS，因为它已经太长了。如果您需要CSS，我将显示它。有人可以帮我吗？这是我的HTML：

<div class="tab">
    <button class="tabLinks" onclick="openDiv(event, 'overview'); appendData()" id="defaultOpen">Overview</button>
    <button class="tabLinks" onclick="openDiv(event, 'features')">Features</button>
    <button class="tabLinks" onclick="openDiv(event, 'requirements')">Requirements</button>
    <button class="tabLinks" onclick="openDiv(event, 'gallery')">Gallery</button>
</div>

<div id="mainContainer">
    <div class="tabContent" id="overview">
        <div id="overview-container">
        </div>
    </div>

    <div class="tabContent" id="features">
        <div id="features-container">
        </div>

    </div>

    <div class="tabContent" id="requirements">
        <div id="requirements-container">
        </div>
    </div>

    <div id="gallery" class="tabContent">
        <div id="gallery-container">
            <div class="slideshow">                             
                <div class="mySlides fade">
                </div>
            <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
            <a class="next" onclick="plusSlides(1)">&#10095;</a>
            </div>            
        </div>
    </div>
</div>

这是我的代码：

fetch("file.json")
.then (response => {
    return response.json();
})
.then (data => {
    return appendData(data);
})
.catch(err => {
    return console.log(err);
});

const appendData = data => {
    let mainContainer = document.getElementById("mainContainer");

    let overview = document.getElementById("overview");
    let features = document.getElementById("features");
    let requirements = document.getElementById("requirements");
    let gallery = document.getElementById("gallery");

    let overviewContainer = document.getElementById("overview-container");                
    let featuresContainer = document.getElementById("features-container");
    let requirementsContainer = document.getElementById("requirements-container");
    let galleryContainer = document.getElementById("gallery-container");

    if(appendData(overview)) {
        let jsonO = (data.overview);
        console.log(jsonO);
        for (i = 0; i < jsonO.length; i++) {
            overviewContainer.innerHTML += `<div class="tabContent" id="overview">
                                                <div id="overview-container">
                                                    <h3 class="h3">${jsonO[i].heading}</h3>
                                                    <p class="par">${jsonO[i].paragraph.replace(/
/g, "<br>")}</p>
                                                </div>
                                            </div>
                                           `; 
            mainContainer.appendChild(overviewContainer);                  
        }
    } else if (features) {
        let jsonF = (data.features);
        console.log(jsonF);
        for (i = 0; i < jsonF.length; i++) {
            featuresContainer.innerHTML +=  `<div class="tabContent" id="features">
                                                <div id="features-container">
                                                    <h3 class="h3">${jsonF[i].heading}</h3>
                                                    <ul class="listStyle">
                                                        <li>${jsonF[i].list.replace(/
/g, "<li>")}</li>
                                                    </ul>
                                            `; 
            mainContainer.appendChild(featuresContainer);     
        }
    } else if (requirements) {
        let jsonR = (data.requirements);
        console.log(jsonR);
        for (i = 0; i < jsonR.length; i++) {
            requirementsContainer.innerHTML +=  `<div class="tabContent" id="requirements">
                                                    <div id="requirements-container">
                                                        <h3 class="h3">${jsonR[i].heading}</h3>
                                                        <p class="par">${jsonR[i].paragraph.replace(/
/g, "<br>")}</p>
                                                        <ul class="listStyle">
                                                            <li>${jsonR[i].list.replace(/
/g, "<li>")}</li>
                                                        </ul>
                                                `;
            mainContainer.appendChild(requirementsContainer);          
        }
    } else if (gallery) {
        let jsonG = (data.gallery);
        console.log(jsonG);
        for (i = 0; i < jsonG.length; i++) {
            galleryContainer.innerHTML +=   `<div id="gallery" class="tabContent">
                                                <div id="gallery-container">
                                                    <div class="slideshow">                             
                                                        <div class="mySlides fade">
                                                            <img src="${jsonG[i].url}"  class="imageSlide"></a>
                                                        </div>
                                                    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
                                                    <a class="next" onclick="plusSlides(1)">&#10095;</a>
                                                    </div>
                                                </div>
                                            </div>
                                            `; 
            mainContainer.appendChild(galleryContainer);          
        }
    }
}

这是我的JSON文件：

{
"overview": [    
    {
        "heading": "lorem",
        "paragraph": "ipsum"
    },
    {
        "heading": "dolor sit amet",
        "paragraph": "consectetur adipiscing"
    } 
],
"features": [
    {
        "heading": "FEATURES",
        "list": "Lorem ipsum
dolor sit amet"
    },
    {
        "heading": "INCLUDES",
        "list": "consectetur adipiscing elit
sed do eiusmod"
    }
],
"requirements": [
        {
            "heading": "MINIMUM SYSTEM REQUIREMENTS",
            "paragraph": "Lorem ipsum",
            "list": "Lorem ipsum
dolor sit amet, consectetur
adipiscing elit, sed"
        },
        {
            "heading": "",
            "paragraph": "Lorem ipsum dolor",
            "list": "sit amet, consectetur
adipiscing elit, sed
do eiusmod tempor"
        }
],
"gallery": [
    {
        "url": "https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg"
    }, 
    {
        "url": "https://cdn.pixabay.com/photo/2015/02/24/15/41/dog-647528__340.jpg"
    },
    {
        "url": "https://image.shutterstock.com/image-photo/mountains-during-sunset-beautiful-natural-260nw-407021107.jpg"
    }
]

}

这是选项卡和画廊的代码：

let slideIndex = 1;
showSlides (slideIndex);
function plusSlides(n) {
    showSlides(slideIndex += n);
}
function currentSlide(n) {
    showSlides (slideIndex = n);
}
function showSlides(n) {
    let i;
    let slides = document.getElementsByClassName("mySlides");
    let dots = document.getElementsByClassName("dot");
    if (n > slides.length) {
        slideIndex = 1;
    }
    if (n < 1) {
        slideIndex = slides.length;
    }
    for (i = 0; i<slides.length; i++) {
        slides[i].style.display = "none";
    }
    for (i=0; i<dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active2", "");
    }
    slides[slideIndex-1].style.display = "block";
}
const openDiv = (evt, divName) => {
    // Declare all variables
    let i, tabContent, tabLinks;

    // Get all elements with class="tabContent" and hide them
    tabContent = document.querySelectorAll(".tabContent");
    for (i = 0; i < tabContent.length; i++) {
        tabContent[i].style.display = "none";
    }

    // Get all elements with class="tabLinks" and remove the class "active"
    tabLinks = document.querySelectorAll(".tabLinks");
    for (i = 0; i < tabLinks.length; i++) {
        tabLinks[i].className = tabLinks[i].className.replace(" active", "");
    }       

    // Show the current tab, and add an "active" class to the button that opened the tab
    document.getElementById(divName).style.display = "block";
    evt.currentTarget.className += " active";

}
document.querySelector("#defaultOpen").click();

CSS文件：

        /* Gallery Style */
        .slideshow-container {
            max-width: 1000px;
            position: relative;
            margin: auto;
        }

        /* Hide the images by default */
        .mySlides {
            display: none;
        }

        .imageSlide {
            text-align: center;
            max-width: 100%;
            display: block;
            margin: 0px auto;
        }

        /* Next & previous buttons */
        .prev, .next {
            cursor: pointer;
            position: absolute;
            top: 50%;
            width: auto;
            margin-top: -22px;
            padding: 16px;
            color: #d1143e;
            font-weight: bold;
            font-size: 18px;
            transition: 0.6s ease;
            border-radius: 0 3px 3px 0;
            user-select: none;
        }

        /* Position the "next button" to the right */
        .next {
            right: 0;
            border-radius: 3px 0 0 3px;
        }

        /* On hover, add a black background color with a little bit see-through */
        .prev:hover, .next:hover {
            background-color: rgba(0,0,0,0.8);
        }

        /* The dots/bullets/indicators */
        .dot {
            cursor: pointer;
            height: 15px;
            width: 15px;
            margin: 0 2px;
            background-color: #212529;
            border-radius: 50%;
            display: inline-block;
            transition: background-color 0.6s ease;
        }

        .active2, .dot:hover {
            background-color: #d1143e;
        }

        /* Fading animation */
        .fade {
            -webkit-animation-name: fade;
            -webkit-animation-duration: 1.5s;
            animation-name: fade;
            animation-duration: 1.5s;
        }

        @-webkit-keyframes fade {
            from {opacity: .4}
            to {opacity: 1}
        }

        @keyframes fade {
            from {opacity: .4}
            to {opacity: 1}
        }

        /* Paragraphs and Headings */
        .h3 {
            font-family: 'Fira Sans', sans-serif;
            text-align: center;
        }

        .par {
            font-family: 'Fira Sans', sans-serif;
            text-align: justify;
        }

        /* Tabs */
        .tab {
            text-align: center;
            position: relative;
            top: 0;
            z-index: 1;
            justify-content: center;
            background-color: #ccc;
            overflow: hidden;
            flex-direction: row;
            width: 100%;     
        }

        .tabLinks {
            border: 10px;
            border-color: transparent;
            margin: 5px;
            color: #000000;
            text-align: center;
            padding: 14px 16px;
            background-color: transparent;
            cursor: pointer;
            font-weight: bold;
            font-family: 'Fira Sans', sans-serif;
            font-size: 17px;
            text-decoration: none;
            text-transform: uppercase;
            position: relative;
        }

        .tabLinks:hover, .tabLinks:active {
            color: rgb(209, 20, 62);
        }

        .tabContent {
            padding-top: 10px;
        }

        /* List style */
        .listStyle {
            list-style: none;
            font-size: 16px;
            font-family: 'Fira Sans', sans-serif;
        }

        .listStyle li::before {
            content: "•";
            color: rgb(209, 20, 62);
            font-weight: bold;
            width: 1em;
            margin-left: -1em;
            list-style-position: outside;
            padding-right: 10px;
            padding-left: 15px;
        }

我的小提琴：https://jsfiddle.net/0x7cgmr8/5/

答案

我根据您的代码制作了一个fiddle，因为您当前的代码有两个问题，对我来说似乎无法解决。编辑过的HTML和JS，您的CSS没有任何更改。

let slideIndex = 1;

function ready(fn) {
    if (document.readyState !== 'loading') {
        fn();
    } else {
        document.addEventListener('DOMContentLoaded', fn);
    }
}

function showSlides(n) {
    let i;
    let slides = document.getElementsByClassName("mySlides");
    let dots = document.getElementsByClassName("dot");
    if (n > slides.length) {
        slideIndex = 1;
    }
    if (n < 1) {
        slideIndex = slides.length;
    }
    for (i = 0; i<slides.length; i++) {
        slides[i].style.display = "none";
    }
    for (i=0; i<dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active2", "");
    }
    slides[slideIndex-1].style.display = "block";
}

function plusSlides(n) {
    showSlides(slideIndex += n);
}

function currentSlide(n) {
    showSlides(slideIndex = n);
}

const openDiv = (evt, divName) => {
    // Declare all variables
    let i, tabContent, tabLinks;

    // Get all elements with class="tabContent" and hide them
    tabContent = document.querySelectorAll(".tabContent");
    for (i = 0; i < tabContent.length; i++) {
        tabContent[i].style.display = "none";
    }

    // Get all elements with class="tabLinks" and remove the class "active"
    tabLinks = document.querySelectorAll(".tabLinks");
    for (i = 0; i < tabLinks.length; i++) {
        tabLinks[i].className = tabLinks[i].className.replace(" active", "");
    }       

    // Show the current tab, and add an "active" class to the button that opened the tab
    document.getElementById(divName).style.display = "block";
    evt.currentTarget.className += " active";

};

const appendData = data => {
    let overviewContainer = document.getElementById("overview-container"),
    	featuresContainer = document.getElementById("features-container"),
        requirementsContainer = document.getElementById("requirements-container"),
        galleryContainer = document.getElementById("gallery-container");

    Object.entries(data).forEach(([key, value]) => {
        if (key === 'overview') {
            for (let i = 0; i < value.length; i++) {
                overviewContainer.innerHTML += `
                    <h3 class="h3">${value[i].heading}</h3>
                    <p class="par">${value[i].paragraph.replace(/
/g, "<br>")}</p>
                `;
            }
        } else if (key === 'features') {
            for (let i = 0; i < value.length; i++) {
                featuresContainer.innerHTML +=  `
                    <h3 class="h3">${value[i].heading}</h3>
                    <ul class="listStyle">
                        <li>${value[i].list.replace(/
/g, "<li>")}</li>
                    </ul>
                `;
            }
        } else if (key === 'requirements') {
            for (let i = 0; i < value.length; i++) {
                requirementsContainer.innerHTML +=  `
                    <h3 class="h3">${value[i].heading}</h3>
                    <p class="par">${value[i].paragraph.replace(/
/g, "<br>")}</p>
                    <ul class="listStyle">
                        <li>${value[i].list.replace(/
/g, "<li>")}</li>
                    </ul>
                `;         
            }
        } else if (key === 'gallery') {
            for (let i = 0; i < value.length; i++) {
                galleryContainer.innerHTML +=   `
                    <div class="slideshow">                             
                        <div class="mySlides fade">
                            <img src="${value[i].url}"  class="imageSlide"></a>
                        </div>
                        <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
                        <a class="next" onclick="plusSlides(1)">&#10095;</a>
                    </div>
                `;       
            }
        }
    });
};

ready(() => {

    fetch("https://api.myjson.com/bins/zumxy")
    .then (response => {
        return response.json();
    })
    .then (data => {
        appendData(data);
        document.querySelector("#defaultOpen").click();
        showSlides(slideIndex);
    })
    .catch(err => {
        return console.log(err);
    });

});

 /* Gallery Style */
.slideshow-container {
    max-width: 1000px;
    position: relative;
    margin: auto;
}

/* Hide the images by default */
.mySlides {
    display: none;
}

.imageSlide {
    text-align: center;
    max-width: 100%;
    display: block;
    margin: 0px auto;
}

/* Next & previous buttons */
.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -22px;
    padding: 16px;
    color: #d1143e;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}

/* Position the "next button" to the right */
.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

/* The dots/bullets/indicators */
.dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #212529;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.active2, .dot:hover {
    background-color: #d1143e;
}

/* Fading animation */
.fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
}

@-webkit-keyframes fade {
    from { opacity: 0.4; }
    to { opacity: 1; }
}

@keyframes fade {
    from { opacity: 0.4; }
    to { opacity: 1; }
}

/* Paragraphs and Headings */
.h3 {
    font-family: 'Fira Sans', sans-serif;
    text-align: center;
}

.par {
    font-family: 'Fira Sans', sans-serif;
    text-align: justify;
}

/* Tabs */
.tab {
    text-align: center;
    position: relative;
    top: 0;
    z-index: 1;
    justify-content: center;
    background-color: #ccc;
    overflow: hidden;
    flex-direction: row;
    width: 100%;
}

.tabLinks {
    border: 10px;
    border-color: transparent;
    margin: 5px;
    color: #000000;
    text-align: center;
    padding: 14px 16px;
    background-co
以上是关于使用JavaScript将具有数组的JSON文件上传到不同的选项卡中的主要内容，如果未能解决你的问题，请参考以下文章
 
 如何将 json 编码的 PHP 数组转换为 Javascript 中的数组？ [复制]
 从 PHP 查询中获取 JSON 数组后，使用 javascript 将 JSON 数组写入 html 页面
 JavaScript：如何将数据添加到 JSON 文件中的数组
 如何在javascript中从内部JSON数组创建具有一些属性的数组
 如何使用 package.json 脚本复制具有特定文件扩展名的文件
 如何使用 jquery/javascript 将文本插入 json [重复]