json data structure in one file and js call to output?

Question

Currently I am calling 2 json files, I'd like instead of calling 2 json file to call only one and output that in html...

One (carousel data) is like that:

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

the other one (number data) like this:

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

To output the data, I'm calling the file apart so via:

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

How can I instead have all the data in a single json data file, and call them ?

Id like to make this much cleaner.

Thank a lot !!

Ankit Kumar Gupta · Accepted Answer · 2017-12-22 05:57:18Z

{
 "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>';
 }
});

Description: Create json object with 2 key(carouselData, numberData).both contain array. We can loop these array separatly

Rahul · Accepted Answer · 2017-11-02 11:03:33Z

0

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

in that file write

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

save this in one file and import where ever needed.Require this file like

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

answered Nov 2, 2017 at 11:03

Rahul

4822 gold badges4 silver badges16 bronze badges

4 Comments

Rahul Over a year ago

if any doubt ask ping me

Mina Over a year ago

Although that might work in a node.js or ES6 compliant environment it won't work for example on IE11, unless using Babel or such.

thibaultlgd Over a year ago

how can i ping you?

Rahul Over a year ago

is that fixed ?

Oleksandr Buchek · Accepted Answer · 2017-11-02 11:03:52Z

0

I recommend you to do separate requests as you can render each block when json is downloaded and handle errors to each json file.

Possible duplicate of this post

answered Nov 2, 2017 at 11:03

Oleksandr Buchek

1,1549 silver badges13 bronze badges

Comments

Alvaro Fernandez · Accepted Answer · 2017-11-02 11:28:21Z

You could just make a associative array json made of regular arrays , such as:

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

And then load it as:

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

Edit: Modified JSON in order to avoid misunderstandings.
Edit 2: Fixed some remaining semicolons.

Hi alvaro, Thansk a lot. seems there is a pb with the json Is the structure correct from your code ?

Collectives™ on Stack Overflow

json data structure in one file and js call to output?

4 Answers 4

Comments

4 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

4 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related