jsonのデータ構造は1つのファイルにあり、jsは出力を呼び出しますか？

Question

現在、私は2つのJSONファイルを呼び出して、私がしたいの代わりに、HTMLで...

一つは（カルーセルデータ）そのようなものであることを一つだけ、出力を呼び出すために2 JSONファイルを呼び出しています：

[ 
{ 
    "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" 
} 
] 

データ、私は経由で離れので、ファイルを呼んでいる：このような

他の1（数字データ）

$.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); 
}); 

代わりに、すべてのデータを1つの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）が配列を含む2つのjsonオブジェクトを作成します。 これらの配列を別々にループすることができます

Answer 2

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

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

Answer 3

のような今までにneeded.Requireこのファイルは私がすることができますようにあなたが別の要求を行うことをお勧めします1つのファイルとインポートでこれを保存

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

を書きますjsonがダウンロードされるときに各ブロックをレンダリングし、エラーを各jsonファイルに処理します。 this post

Answer 4

の

可能性のある重複したあなただけのような通常の配列で作られた連想配列の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：残りのセミコロンを修正しました。