I'm loading data from a json file in which i plan to use on html list with links, i'm not sure if the problem is the how i wrote the json file or how i access the data in the file.
according http://jsonlint.com/ the json file is correct
the menu.json file
[
{
"opciones": {
"oferta": [
{
"tipo": "1001"
},
{
"tipo": "1002"
},
{
"tipo": "1003"
},
{
"tipo": "1004"
}
]
}
},
{
"opciones": {
"demanda": [
{
"tipo": "2001"
},
{
"tipo": "2002"
},
{
"tipo": "2003"
}
]
}
}
]
Here is how i try to fill the html list code:
<html ng-app="App">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<title>test html</title>
<script src="json_load_menu.js"></script> <!--script que cargar archivo json-->
<link rel = "stylesheet" type = "text/css" href = "./css/style.css" /> <!--css con colores de celdas -->
</head>
<body ng-controller="menuCtrl">
<div class="container">
<ul >
<li ng-repeat="menuOpcion in menu"><a href="#" >{{menuOpcion.opciones.oferta}}</a></li>
</ul>
<ul >
<li ng-repeat="menuOpcion in menu"><a href="#" >{{menuOpcion.opciones.demanda}}</a></li>
</ul>
</div>
</body>
</html>
this is the result:
[{"tipo":"1001"},{"tipo":"1002"},{"tipo":"1003"},{"tipo":"1004"}]
*
[{"tipo":"2001"},{"tipo":"2002"},{"tipo":"2003"}]
*
what is supposed to do:
*1001
*1002
*etc
*2001
*2002
How to avoid this?
EDIT:i have tried
<ul >
<li ng-repeat="menuOpcion in menu"><a href="#" >{{menuOpcion.opciones.oferta.tipo}}</a></li>
</ul>
Try
<ul>
<li ng-repeat="menuOpcion in menu[0].opciones.oferta"><a href="#" >{{menuOpcion.tipo}}</a></li>
</ul>
<ul >
<li ng-repeat="menuOpcion in menu[0].opciones.demanda"><a href="#" >{{menuOpcion.tipo}}</a></li>
</ul>
Related
Lately, I've been trying to use images in my webpack project by the HTML file. When I call the image with its actual path it just displays a broken image icon. I have tried using <img src="<%= require() %>"/> as I saw on the internet and also importing them on javascript using import './assets/C.png' but nothing seems to work and just displays that annoying icon. When you go to inspect and look at sources you see the images but you can't actually see the photo:
But actually, the png files called on the CSS stylesheet are bundled correctly:
Can anyone explain to me why this happens or how to fix it? Thanks, if you need more files let me know, here is my code;
webpack.config.js:
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCSSExtractPlugin = require('mini-css-extract-plugin')
const path = require('path')
module.exports = {
entry: path.resolve(__dirname, '../src/script.js'),
output:
{
path: path.resolve(__dirname, "../dist"),
filename: "bundle.[contenthash].js"
},
devtool: 'source-map',
plugins:
[
new CopyWebpackPlugin({
patterns: [
{ from: path.resolve(__dirname, '../static') }
]
}),
new HtmlWebpackPlugin({
template: path.resolve(__dirname, '../src/index.html'),
minify: true
}),
new MiniCSSExtractPlugin()
],
module:
{
rules:
[
// HTML
{
test: /\.(html)$/,
use: ['html-loader']
},
// JS
{
test: /\.js$/,
exclude: /node_modules/,
use:
[
'babel-loader'
]
},
// CSS
{
test: /\.css$/,
use:
[
MiniCSSExtractPlugin.loader,
'css-loader'
]
},
// Images
{
test: /\.(jpe?g|png|gif)$/i,
loader: "file-loader"
},
// Fonts
{
test: /\.(ttf|eot|woff|woff2)$/,
use:
[
{
loader: 'file-loader',
options:
{
outputPath: 'assets/fonts/'
}
}
]
}
]
}
}
index.html:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>My page</title>
<script defer src="script1.js"></script>
<script src="script2.js"></script>
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="./assets/C.png" type="image/x-icon">
</head>
<body>
<div class="headerdiv">
<a class="logo" href="/"><img class="logoimg" src="./assets/CREAT_extended_blue.png"></a>
<nav>
<ul class="nav__links">
<li>Página principal</li>
<li>Vender un producto</li>
<li>Carrito de la compra</li>
<li>Mi cuenta</li>
<li>Información</li>
</a></li>
</ul>
</nav>
<a class="cta" href="#">Contact</a>
<p class="menu cta">Buscar</p>
</div>
<div id="mobile__menu" class="overlay">
<a class="close">×</a>
<div class="overlay__content">
Página principal
Vender un producto
Carrito de la compra
Mi cuenta
Información
</div>
</div>
<script type="text/javascript" src="mobile.js"></script>
</script>
<header data-aos="fade-up" class="cabecera-inicio" id="hero-image">
<canvas class="webgl"></canvas>
<script src="script.js"></script>
</header>
<div class="page-content">
</div>
<script src="https://unpkg.com/aos#next/dist/aos.js"></script>
<script>
AOS.init();
</script>
</body>
<footer>
<div class="textos-destacado" >
</br>
<h1 data-aos='fade-up'>
<b> This is a title </b>
</h1>
</div>
<div class="sponsor">
<img data-aos='fade-left' src="./assets/hoja2.png"/>
<div class="sponsor-producto">
</div>
<img data-aos='fade-right' src="./assets/hoja2.png"/>
</div>
</footer>
</html>
My project distribution:
Well, the files provided with the course had a bug that wasn't fixed yet so with asset-modules I got to fix that bug.
I am programming a flask application. In that I have a main html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Table generator</title>
<link rel="stylesheet" href="/static/lib/skeleton/normalize.css" />
<link rel="stylesheet" href="/static/lib/skeleton/skeleton.css" />
<link rel="stylesheet" href="/static/style.css" />
</head>
<body>
<div class="container">
<ul class="navigation">
<li class="navigation-item">
Home
</li>
<li class="navigation-item">
Instructions
</li>
</ul>
{% block content %}{% endblock %}
</div>
</body>
</html>
for my stylesheet I linked this css file:
.navigation {
list-style-type = none;
}
But when I am running the file the list still looks like this:
I want my list to not have the dots in front. What am I doing wrong?
This code will work, you need to apply that style to the list element itself.
.navigation li{
list-style-type: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Table generator</title>
<link rel="stylesheet" href="/static/lib/skeleton/normalize.css" />
<link rel="stylesheet" href="/static/lib/skeleton/skeleton.css" />
<link rel="stylesheet" href="/static/style.css" />
</head>
<body>
<div class="container">
<ul class="navigation">
<li class="navigation-item">
Home
</li>
<li class="navigation-item">
Instructions
</li>
</ul>
</div>
</body>
</html>
Here's the Plunk Code can Verify Now also
http://next.plnkr.co/edit/vrI2haNy1zYPDcCWh7gj?p=preview&utm_source=legacy&utm_medium=worker&utm_campaign=next&preview
Java Script Code: it is containing dummy json there root node is Admin System and there sub menu are Like Angular, Linux, Server
Here UI will be shown as Given Below Format and this Menu will be able to Expendable and Close able or collapse so this will be fetch the data as from Service and same way can be use in project
angular.module('myapp', ['ui.bootstrap'])
.controller("MainController", ["$scope",
function($scope){
$scope.bodyText = "Test Menu";
$scope.showSubmenu = function(item) {
if($scope.activeParentIndex === item){
$scope.activeParentIndex = "";
}else{
$scope.activeParentIndex = item;
}
}
$scope.isShowing = function(index) {
if($scope.activeParentIndex === index){
return true;
} else{
return false;
}
};
$scope.modulos =
[{"module":"Admin System ",
"adm_modulo_id":1,
"submodule":[{"res":"Angular","url":"#/admin/1"},
{"res":"Linux","url":"#/admin/2"},
{"res":"Server","url":"#/admin/3"}
]
}];
}]);
Html Code: it will show dummy json code as menu and sub-menu
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link data-require="bootstrap-css#3.x" data-semver="3.0.3" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.2.x" src="http://code.angularjs.org/1.2.9/angular.js" data-semver="1.2.9"></script>
<script data-require="ui-bootstrap#*" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
<script src="app.js"></script>
</head>
<body>
<h1>Test</h1>
<div ng-controller="MainController">
{{bodyText}}
<ul class="sidebar-menu" ng-repeat="m in modulos">
<li class="treeview" ng-repeat="(itemIndex, item) in modulos">
<a ng-click="showSubmenu(itemIndex)">
<i class="fa fa-table"></i> <span>{{item.module}}</span>
</a>
<ul class="sub-nav" ng-show="isShowing(itemIndex)">
<li ng-repeat="sub_element in m.submodule">
{{sub_element.res}}
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
hi i'm working in visual studio with bootstrap.
i'm trying to design the section at the and of code, but it doesn't work (i don't have the access to id="TikNehesTitle".
i added my HTML and CSS (in comment) code here.
thanks for responding.
my HTML code:
<!DOCTYPE html>
<html lang="he">
<head>
<title></title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="Stylesheet" type="text/css" href="StyleSheet.css" />
</head>
<body dir="rtl">
<div class="container">
<nav class="navbar navbar-inverse">
<!-- menu list-->
<ul class="nav navbar-nav">
<li>הירשם</li>
<li>התחבר</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>צור קשר</li>
<li>אודות</li>
<li>איזור מגורים</li>
<li>דף הבית</li>
</ul>
</nav>
</div>
<section>
<div class="container" id="TikNehesTitle"><h1>תיק נכס</h1></div>
</section>
</body>
</html>
CSS id is set with # prefix.
Simply set your CSS to:
body {
}
#TikNehesTitle {
height: 100px;
width: 100px;
border: 1px solid red;
}
how can i parse the particular 'li' field from the following using jquery template?
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>JQTsDocument</title>
<link rel="stylesheet" href="css/layout1.css"/>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-template.js"></script>
<script id="lessons" type="text/x-jquery-tmpl">
<header>
<h1>${head1}</h1>
<img src="${image.source}" />
<nav>
<ul>
<li>
{{each li}}
{{/each}}
</li>
</ul>
</nav>
</header>
</script>
<script type="text/javascript">
var header = [{
"head1" : "JQT Doc",
"image" : {
"source" : "images/logo.png",
"alternate" : "JQT Doc"
},
"nav" : [{
"ul" : [{
"li" : "1st"
}, {
"li" : "2nd"
}]
}]
}];
$(document).ready(function() {
$('#lessons').tmpl(header).appendTo('body');
});
</script>
</head>
<body></body>
Getting no idea how to parse that "li" using each loop inside the template and if the i want to access the nav elements how can i do that
I think what you are looking for is this
<script id="lessons" type="text/x-jquery-tmpl">
<header>
<h1>${head1}</h1>
<img src="${image.source}" />
<nav>
<ul>
<li>
{{each nav[0].ul}}
<div>${li}</div>
{{/each}}
</li>
</ul>
</nav>
</header>
</script>
You can find a working sample here.