一个文件中的json数据结构和js调用输出？

Posted 2021-05-03

目前我正在调用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数据文件中，然后调用它们？

我想让这个更清洁。

非常感谢 ！！

答案

{
 "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对象.both包含数组。我们可以分开循环这些数组

另一答案

         var a =   [
            {
                "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"
              }
            ]
   var b= [
    {
      "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"
      }
    ]

在那个文件写

module.exports = {
a :a,
b:b
}

将其保存在一个文件中，然后根据需要导入。请查询此文件

var obj = require('/filename')
var firstJson = obj.a;
var secondJson = obj.b

另一答案

我建议你做单独的请求，因为你可以在下载json时渲染每个块并处理每个json文件的错误。

this post可能重复

另一答案

您可以创建一个由常规数组组成的关联数组json，例如：

{
   carousel: [{
    "title": "65",
    "description": "genegregerggrators connected<br/> to the grid",
    "img": "assets/img/stories.jpg",
    "link": "erg"
  }],
  numbers: [{
    "number": "65",
    "description": "generators connected<br/> to the grid",
    "imageUrl": "assets/img/Plug.svg"
  }]
}

然后将其加载为：

  $.getJSON('js/data.json', function(data) {
    var htmlText = '';

       for ( var key in data.carousel ) {
         htmlText +=
            '<article>'                               
          +=   '<div class="article-wrapper">'                  
          +=     '<img src="' + data.carousel[key].img + '">'                  
          +=     '<div class="title-overlay">'
          +=       '<h2>' + data.carousel[key].title + '</h2>'
          +=     '</div>'
          +=     '<div class="content">'
          +=       '<p>' + data.carousel[key].description + '</p>'                  
          +=     '</div>'
          +=   '</div>'
          += '</article>';
       }

      $('.article-stories').append(htmlText);

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

编辑：修改JSON以避免误解。 编辑2：修复了一些剩余的分号。