Link to home
Start Free TrialLog in
Avatar of error2013
error2013

asked on

Javascript Load sections of website by reading json

I have a simple html page that uses bootstrap grid.

Each page of the grid I've labelled as a section.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>

	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  </head>
  <body>

  <div class="container">

  	<div class="row">
  		<div class="col-md-4">Section 1</div>
  		<div class="col-md-4">Section 2</div>
  		<div class="col-md-4">Section 3</div>
  	</div>

  	<div class="row">
  		<div class="col-md-6">Section 4</div>
  		<div class="col-md-6">Section 5</div>
  	</div>

  </div>
 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
   	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </body>
</html>

Open in new window


Example data:

{
  "section": "section1",
  "position": "5"
}

Open in new window


What I want to do is to load the different grid parts by reading json data.

So basically, the page loads, reads the json data which contains the positions of the sections and then populates the website.
Avatar of HainKurt
HainKurt
Flag of Canada image

I dont get what you want when data is this

{
  "section": "section1",
  "position": "5"
}

Open in new window

Avatar of error2013
error2013

ASKER

The data just means the id of the div and the position in the grid of that div
ASKER CERTIFIED SOLUTION
Avatar of HainKurt
HainKurt
Flag of Canada image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
In the data is says section1, position: 4  .... section1 should be in the 4th position and it's at the first.
you want to swap

<div class="col-md-4">Section 1</div>

with

<div class="col-md-6">Section 4</div>

and those divs does not have any id! they have some text!