Leer base de datos JSON desde archivo datos.json

datos.json

{
    "videos": [
      {
        "Titulo": "RESPONSIVE WEB DESIGN CON BOOTSTRAP",
        "Tiempo": "01:07:20",
        "Final": "si"
      },
      {
        "Titulo": "Presentación",
        "Tiempo": "00:03:20",
        "Final": "si"
      },
      {
        "Titulo": "*** Definición del proyecto de diseño",
        "Final": "si"
      },
      {
        "Titulo": "- Introducción",
        "Tiempo": "00:04:50",
        "Final": "si"
      },
      {
        "Titulo": "- Entorno de trabajo",
        "Tiempo": "00:04:50",
        "Final": "si"
      },
      {
        "Titulo": "- Esquema y estructura del proyecto de diseño",
        "Tiempo": "00:07:45",
        "Final": "si"
      },
      {
        "Titulo": "- Preparación de imágenes en Photoshop",
        "Tiempo": "00:06:20",
        "Final": "si"
      },
      {
        "Titulo": "- Prototipado de la página web",
        "Tiempo": "00:05:25",
        "Final": "si"
      },
      {
        "Titulo": "- Estructura HTML5",
        "Tiempo": "00:10:35",
        "Final": "si"
      },
      {
        "Titulo": "*** Twitter Bootstrap (Framework Responsive Design)",
        "Final": "si"
      },
      {
        "Titulo": "- Introducción a bootstrap",
        "Tiempo": "00:06:25",
        "Final": "si"
      },
      {
        "Titulo": "- Estructura HTML5 básica para bootstrap",
        "Tiempo": "00:04:20",
        "Final": "si"
      },
      {
        "Titulo": "- Sistema de rejilla (grid system) fijo y fluido",
        "Tiempo": "00:11:14",
        "Final": "si"
      },
      {
        "Titulo": "- Capacidades Responsive (@media - CSS)",
        "Tiempo": "00:09:05",
        "Final": "si"
      },
      {
        "Titulo": "- Base CSS - Tipografías y elementos en línea",
        "Tiempo": "00:11:49",
        "Final": "si"
      },
      {
        "Titulo": "- Base CSS - Código preformateado y Tablas",
        "Tiempo": "00:08:25",
        "Final": "si"
      },
      {
        "Titulo": "- Base CSS - Formularios",
        "Tiempo": "00:07:21",
        "Final": "si"
      },
      {
        "Titulo": "- Base CSS - Botones",
        "Tiempo": "00:04:36",
        "Final": "si"
      },
      {
        "Titulo": "- Base CSS - Imágenes e Iconos",
        "Tiempo": "00:04:25",
        "Final": "si"
      },
      {
        "Titulo": "- Componentes - Botones",
        "Tiempo": "00:07:00",
        "Final": "si"
      },
      {
        "Titulo": "- Componentes - Navegación (NavBar)",
        "Tiempo": "00:11:16",
        "Final": "si"
      },
      {
        "Titulo": "- Componentes - Navegación (Breadcrumbs - Pagination)",
        "Tiempo": "00:04:02",
        "Final": "si"
      },
      {
        "Titulo": "- Componentes - Etiquetas, insignias",
        "Tiempo": "00:04:05",
        "Final": "si"
      },
      {
        "Titulo": "- Componentes - Tipografía - Miniaturas - Alertas",
        "Tiempo": "00:04:59",
        "Final": "si"
      },
      {
        "Titulo": "- Componentes - Carrousel",
        "Tiempo": "00:08:37",
        "Final": "si"
      },
      {
        "Titulo": "- Componentes - Ventanas modales",
        "Tiempo": "00:07:38",
        "Final": "si"
      },
      {
        "Titulo": "- Personalizando y ampliando Bootstrap con LESS css I",
        "Tiempo": "00:06:45",
        "Final": "si"
      },
      {
        "Titulo": "- Personalizando y ampliando Bootstrap con LESS css II",
        "Tiempo": "00:07:31",
        "Final": "si"
      },
      {
        "Titulo": "*** Maquetación y desarrollo",
        "Final": "si"
      },
      {
        "Titulo": "- Desarrollo de la página principal (index.html)",
        "Tiempo": "00:05:07",
        "Final": "si"
      },
      {
        "Titulo": "- Maquetación de elementos comunes",
        "Tiempo": "00:06:46",
        "Final": "si"
      },
      {
        "Titulo": "- Integración de elemento slider de imágenes",
        "Tiempo": "00:03:00",
        "Final": "si"
      },
      {
        "Titulo": "- Lightbox para imágenes",
        "Tiempo": "00:05:27",
        "Final": "si"
      },
      {
        "Titulo": "- Vídeo responsive desde Youtube o Vimeo",
        "Tiempo": "00:02:59",
        "Final": "si"
      },
      {
        "Titulo": "Conclusión",
        "Tiempo": "00:01:01",
        "Final": "si"
      }
    ]
}

index.html

<!DOCTYPE html>
<html lang="es-ES">
<head>
	<meta charset="utf-8">
    <title>Curso de desarrollo con la API Google Maps</title>

    <link rel="shortcut icon" href="favicon.ico">
    
    <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'>

	<link rel="stylesheet" href="assets/css/styles.css">


</head>

<body>
    <div id="data"></div>

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
	<script src="assets/js/script.js"></script>

</body>
</html>

script.js

// Leer base de datos JSON desde archivo datos.json

var data;
 
$(document).ready(function() {
	$.ajax({
		url: "./assets/js/datos.json",
		data: "nocache=" + Math.random(),
		type: "GET",
		dataType: "json",
		success: function(source){
			data = source;
			mostrarJSON();
		},
		error: function(data){
			alert("ERROR");
		}
	});							
});

// Mostrar resultados en div #data

function mostrarJSON(){
	$.each(data.videos, function(index, value) {
		$("#data").append('<p>' + data.videos[index].Titulo  + ' - ' + data.videos[index].Tiempo + ' - ' + data.videos[index].Final  + '</p>');
	});
 
}

styles.css

body {
	margin           : 0;
	padding          : 0;
	text-align       : center;
	font-family      : 'Roboto Condensed', sans-serif;
	background-color : white;
}
h1 { color           : #185fae; }
h2 { color           : #f86024; text-align: left; }
p {
	margin           : 0.4em 0;
	text-align       : left;
	text-indent      : 1em;
	font-size        : 1.2em;
}
#data {
	background-color : grey;
	color            : white;
	padding          : 10%;
}