javascript - json数据结构在一个文件中，js调用输出？

Question

目前我正在调用 2 个 json 文件，我不想调用 2 个 json 文件，而是只调用一个并以 html 格式输出...

其中一个(轮播数据)是这样的:

[
{
    "carouseltitle": "65",
    "carouseldescription": "genegregerggrators connected<br/> to the grid",
    "carouselimg": "assets/img/stories.jpg",
    "carousellink": "erg"
},
{
    "carouseltitle": "634345",
    "carouseldescription": "3545453 connected<br/> to the grid",
    "carouselimg": "assets/img/stories.jpg",
    "carousellink": "erg"
},
{
    "carouseltitle": "HELLO",
    "carouseldescription": "HELLO connected<br/> to the grid",
    "carouselimg": "assets/img/stories.jpg",
    "carousellink": "erg"
}
]

另一个(数字数据)如下:

[
{
  "number": "65",
  "description": "generators connected<br/> to the grid",
  "imageUrl": "assets/img/Plug.svg"
},
{
  "number": "314MW",
  "description": "of energy controlled<br/> in the UK",
  "imageUrl": "assets/img/Lightning_Bolt.svg"
},
{
"number": "£100m",
"description": "CAPEX avoided",
"imageUrl": "assets/img/Money.svg"
},
{
  "number": "6mths",
  "description": "average time to connection",
  "imageUrl": "assets/img/Calendar.svg"
},
{
  "number": "177kt",
  "description": "CO2 avoided",
  "imageUrl": "assets/img/Cloud.svg"
}  
]

为了输出数据，我通过以下方式调用文件:

$.getJSON('js/carousel.json', function(data) {
    var htmlText = '';
    for ( var key in data ) {
        htmlText += '<article>';                               
        htmlText += '<div class="article-wrapper">';                  
        htmlText += ' <img src="' + data[key].carouselimg + '">';                  
        htmlText += '<div class="title-overlay">';
        htmlText += '<h2>' + data[key].carouseltitle + '</h2>';

        htmlText += '</div>';
        htmlText += '<div class="content">';
        htmlText += '<p>' + data[key].carouseldescription + '</p>';                    
        htmlText += '</div>';
        htmlText += '</div>';
        htmlText += '</article>';
    }
    $('.article-stories').append(htmlText);    
 });

 $.getJSON('js/data.json', function(data) {
     var htmlText = '';
     for ( var key in data ) {
         htmlText += '<div class="row numbers">';                               
         htmlText += '<div class="number-row">';                  
         htmlText += '<div class="col-one empty"></div>';
         htmlText += '<div class="col-one"> <img src="' + data[key].imageUrl + '"></div>';
         htmlText += '<div class="col-nine ">';
         htmlText += '<div class="number">' + data[key].number + '</div>';                    
         htmlText += '<div class="description"><h3>' + data[key].description + '</h3></div>';                    
         htmlText += '</div>';
         htmlText += '<div class="col-one empty"></div>';
         htmlText += '</div>';
         htmlText += '<div class="horizontal-center">';                  
         htmlText += '<span class="divider"></span>';                  
         htmlText += '</div>';
         htmlText += '</div>';
     }
     $('.number-wrapper').append(htmlText);
 });

我怎样才能将所有数据放在一个 json 数据文件中，并调用它们？

我想让它变得更干净。

非常感谢!!

Answer 1

{
 "carouselData": [
    {
        "carouseltitle": "65",
        "carouseldescription": "genegregerggrators connected<br/> to the grid",
        "carouselimg": "assets/img/stories.jpg",
        "carousellink": "erg"
    },
    {
        "carouseltitle": "634345",
        "carouseldescription": "3545453 connected<br/> to the grid",
        "carouselimg": "assets/img/stories.jpg",
        "carousellink": "erg"
    },
    {
        "carouseltitle": "HELLO",
        "carouseldescription": "HELLO connected<br/> to the grid",
        "carouselimg": "assets/img/stories.jpg",
        "carousellink": "erg"
    }
 ],
 "numberData": [
    {
    "number": "65",
    "description": "generators connected<br/> to the grid",
    "imageUrl": "assets/img/Plug.svg"
    },
    {
    "number": "314MW",
    "description": "of energy controlled<br/> in the UK",
    "imageUrl": "assets/img/Lightning_Bolt.svg"
    },
    {
    "number": "£100m",
    "description": "CAPEX avoided",
    "imageUrl": "assets/img/Money.svg"
    },
    {
    "number": "6mths",
    "description": "average time to connection",
    "imageUrl": "assets/img/Calendar.svg"
    },
    {
    "number": "177kt",
    "description": "CO2 avoided",
    "imageUrl": "assets/img/Cloud.svg"
    }  
]
}

$.getJSON('js/carousel.json', function(data) {
  var htmlText = '';
  for ( var key in data.carouselData ) {
    htmlText += '<article>';                               
    htmlText += '<div class="article-wrapper">';                  
    htmlText += ' <img src="' + data.carouselData[key].carouselimg + '">';                  
    htmlText += '<div class="title-overlay">';
    htmlText += '<h2>' + data.carouselData[key].carouseltitle + '</h2>';

    htmlText += '</div>';
    htmlText += '<div class="content">';
    htmlText += '<p>' + data.carouselData[key].carouseldescription + '</p>';                    
    htmlText += '</div>';
    htmlText += '</div>';
    htmlText += '</article>';
}
$('.article-stories').append(htmlText);  
 htmlText = '';
 for ( var key in data.numberData ) {
     htmlText += '<div class="row numbers">';                               
     htmlText += '<div class="number-row">';                  
     htmlText += '<div class="col-one empty"></div>';
     htmlText += '<div class="col-one"> <img src="' + data.numberData[key].imageUrl + '"></div>';
     htmlText += '<div class="col-nine ">';
     htmlText += '<div class="number">' + data.numberData[key].number + '</div>';                    
     htmlText += '<div class="description"><h3>' + data.numberData[key].description + '</h3></div>';                    
     htmlText += '</div>';
     htmlText += '<div class="col-one empty"></div>';
     htmlText += '</div>';
     htmlText += '<div class="horizontal-center">';                  
     htmlText += '<span class="divider"></span>';                  
     htmlText += '</div>';
     htmlText += '</div>';
 }
});

描述:使用 2 个键(carouselData，numberData)创建 json 对象。两者都包含数组。我们可以分别循环这些数组