AngularJS ng-repeat from json string - javascript

I am trying to find tasks from a project and display them in separate div .
Following json string is my data source which is within {{projects}} variable.
[{"_id":"200566","value":[{"name":"Inbox","pinned":false,"milestone-id":"","description":"","uncompleted-count":0,"id":"713888","complete":false,"private":false,"position":3999,"status":"reopened","projectId":"200566","projectName":"fastfy.com","DLM":null},{"name":"General tasks","pinned":false,"milestone-id":"","description":"","uncompleted-count":6,"id":"673437","complete":false,"private":false,"position":4000,"status":"reopened","projectId":"200566","projectName":"fastfy.com","DLM":null}]},{"_id":"221840","value":[{"name":"Inbox","pinned":false,"milestone-id":"","description":"","uncompleted-count":0,"id":"800864","complete":false,"private":false,"position":3998,"status":"reopened","projectId":"221840","projectName":"The Crown","DLM":null},{"name":"General tasks","pinned":true,"milestone-id":"","description":"","uncompleted-count":3,"id":"751194","complete":false,"private":false,"position":4000,"status":"reopened","projectId":"221840","projectName":"The Crown","DLM":null}]},{"_id":"203859","value":[{"name":"General tasks","pinned":false,"milestone-id":"","description":"","uncompleted-count":3,"id":"690722","complete":false,"private":false,"position":4000,"status":"reopened","projectId":"203859","projectName":"mphosipalityconsulting.com","DLM":null}]},{"_id":"207043","value":[{"name":"General tasks","pinned":false,"milestone-id":"","description":"","uncompleted-count":1,"id":"700757","complete":false,"private":false,"position":4000,"status":"new","projectId":"207043","projectName":"Gloucester B&B & Pub","DLM":null}]}]
I have tried
{{projects}}
<li class="list-group-item" ng-repeat="p in projects">
<div class="nm">
{{p.value[$index].projectName}}
</div>
<div class="taskBtn">
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#taskList{{post.id}}">[+]</button>
</div>
<div id="taskList{{post.id}}" class="collapse">
{{p.value[$index].name}}
</div>
</li>
This outputs following
Could you tell me how do i get the looping properly and get Something like
Project name :
Task lists :
project name :
tasks lists:
Project name :
Task lists :
project name :
tasks lists:

Use ng-repeat inside an ng-repeat
Your DOM
<!DOCTYPE html>
<html ng-app="App">
<head lang="en">
<meta charset="utf-8">
<title>Custom Plunker</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body ng-controller="Proj">
<ul ng-repeat="p in projects">
<ul>
<li ng-repeat="item in p.value">
{{item.name}}
</li>
</ul>
</ul>
</body>
</html>
Controller code:
angular.module('App', []).controller('Proj', function ($scope) {
$scope.projects = [{"_id":"200566","value":[{"name":"Inbox","pinned":false,"milestone-id":"","description":"","uncompleted-count":0,"id":"713888","complete":false,"private":false,"position":3999,"status":"reopened","projectId":"200566","projectName":"fastfy.com","DLM":null},{"name":"General tasks","pinned":false,"milestone-id":"","description":"","uncompleted-count":6,"id":"673437","complete":false,"private":false,"position":4000,"status":"reopened","projectId":"200566","projectName":"fastfy.com","DLM":null}]},{"_id":"221840","value":[{"name":"Inbox","pinned":false,"milestone-id":"","description":"","uncompleted-count":0,"id":"800864","complete":false,"private":false,"position":3998,"status":"reopened","projectId":"221840","projectName":"The Crown","DLM":null},{"name":"General tasks","pinned":true,"milestone-id":"","description":"","uncompleted-count":3,"id":"751194","complete":false,"private":false,"position":4000,"status":"reopened","projectId":"221840","projectName":"The Crown","DLM":null}]},{"_id":"203859","value":[{"name":"General tasks","pinned":false,"milestone-id":"","description":"","uncompleted-count":3,"id":"690722","complete":false,"private":false,"position":4000,"status":"reopened","projectId":"203859","projectName":"mphosipalityconsulting.com","DLM":null}]},{"_id":"207043","value":[{"name":"General tasks","pinned":false,"milestone-id":"","description":"","uncompleted-count":1,"id":"700757","complete":false,"private":false,"position":4000,"status":"new","projectId":"207043","projectName":"Gloucester B&B & Pub","DLM":null}]}];;
});
http://plnkr.co/edit/4RaxuzA3YXRIG8LvPwlr?p=preview

This Nested ng-repeat can b your solution...
<li class="list-group-item" ng-repeat="p in projects">
<div class="nm">
{{p.value[$index].projectName}}:
<ul ng-repeat="t in p.value">
<li>{{t.name}}</li>
</ul>
</div>
<div class="taskBtn">
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#taskList{{post.id}}">[+]</button>
</div>
<div id="taskList{{post.id}}" class="collapse">
{{p.value[$index].name}}
</div>
</li>

Related

I am Unable to get Show toggle

The problem I am getting is, whenever I am clicking on the Question It has to show the answer, but I am unable to get it so please help me getting it.
My code:
<html>
<head>
<meta charset="UTF-8">
<title>FAQ</title>
</head>
<body>
<div class="faq">
<ul class="frequent-ul list-unstyled">
<div class="bb">
<li class="question clearfix accordion" id="accordionExample show">
<span class="frequent-icon">Q</span>
<h4 class="frequent-text">I am a non-tech can I still learn Blockchain?</h4>
</li>
</div>
<div class="aa">
<li class="answer clearfix" id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample hide"><span class="frequent-icon">A</span> <span class="frequent-text">Yes, for the fundamentals of blockchain, any graduate having passion to learn this technology can take the program.</span></li>
</div>
</ul>
</div>
</body>
</html>
<script>
$("h4.frequent-text").on('click', function() {
$(this).next(".aa").slideToggle('slow');
});
$(document).ready(function() {
$(".aa").children("li").hide();
})
</script>
You have an invalid html. You shouldn't put <div> inside the <ul> and on top of the tags of <li>.
And I edited your jquery code a bit.
$(document).ready(function() {
$(".frequent-text").hide();
$(".frequent-icon").on('click', function() {
$(this).next(".frequent-text").slideToggle('slow');
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<meta charset="UTF-8">
<title>FAQ</title>
</head>
<body>
<div class="faq">
<ul class="frequent-ul list-unstyled">
<li class="question clearfix accordion" id="accordionExample show">
<span class="frequent-icon">Q</span>
<h4 class="frequent-text">I am a non-tech can I still learn Blockchain?</h4>
</li>
<li class="answer clearfix" id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample hide">
<span class="frequent-icon">A</span>
<span class="frequent-text">Yes, for the fundamentals of blockchain, any graduate having passion to learn this technology can take the program.</span>
</li>
</ul>
</div>
</body>
</html>

Vue.js 2.x v-for in a <table> not working (Property or method not defined)

I was trying to iterate though an array defined in the data section of a Vue instance, so the table head could be determined automatically. But when I ran the code, the console output was as follows:
Here's the code (.js file combined):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue Demo</title>
<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
<script src="http://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<h3>
Staffs
</h3>
<table id="mytable" class="table table-hover">
<thead>
<tr>
<th v-for:"term in items">
{{term}}
</th>
</tr>
</thead>
<tbody>
<tr>
<td>6556</td>
<td>
TB - Monthly
</td>
<td>
01/04/2012
</td>
<td>
Default
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row clearfix">
<div class="col-md-8 column">
<ul class="pagination">
<li>
Prev
</li>
<li v-for="n in 5">
{{n}}
</li>
<li>
Next
</li>
</ul>
</div>
<div class="col-md-4 column">
<button class="btn btn-default" type="button">button</button>
</div>
</div>
</div>
<script>
'use strict';
console.log("here we go!");
var tab = new Vue({
el: '#mytable',
data: {
items: ['aa','bb']
}
});
</script>
</body>
</html>
And the appearance was like:
Replace
v-for:"term in items"
With
v-for="term in items"

Angular : ng-repeat not working

Here is my code , i take it from w3school.
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<script type="text/javascript" src="./angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName = "sparsh";
$scope.lastName = "khandelwal";
});
</script>
<title>Home Page</title>
</head>
<body>
<div ng-app="myApp" ng-init="name='Sparsh'">
<div ng-controller="myCtrl">{{firstName}}</div>
<p>
Name : <input type="text" ng-model="name">
</p>
<h1>Hello {{name}}</h1>
</div>
<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
<ul>
<li ng-repeat="x in names">{{x}}</li>
</ul>
</div>
</body>
</html>
ng-repeat in second block is not working.
here is the output i get on browser
Please help me out
Angular only bootstraps the first found application on the page, i.e. the first container with ng-app attribute. The second one you put, ng-app="" will be ignored. Although, you could manually bootstrap the second one with angular.bootstrap method, in your case it makes more sense to wrap entire body into the same app and remove the second ngApp directive:
<body ng-app="myApp">
<div ng-init="name='Sparsh'">
<div ng-controller="myCtrl">{{firstName}}</div>
<p>
Name :
<input type="text" ng-model="name" />
</p>
<h1>Hello {{name}}</h1>
</div>
<div ng-init="names=['Jani','Hege','Kai']">
<ul>
<li ng-repeat="x in names">{{x}}</li>
</ul>
</div>
</body>
Demo: http://plnkr.co/edit/UXTGEWOaRu82WpeOvuOz?p=preview
you can have only one ng-app in html page
so change your code as
<body ng-app="myApp">
<div ng-init="name='Sparsh'">
<div ng-controller="myCtrl">{{firstName}}</div>
<p>
Name :
<input type="text" ng-model="name" />
</p>
<h1>Hello {{name}}</h1>
</div>
<div ng-init="names=['Jani','Hege','Kai']">
<ul>
<li ng-repeat="x in names">{{x}}</li>
</ul>
</div>
</body>
The problem is, that only one ng-app can be automatically bootstrapped per webpage. So the second ng-repeat does not get parsed because it is not contained within an app.
You need to manually bootstrap your apps with angular.bootstrap()
https://docs.angularjs.org/api/ng/function/angular.bootstrap
This part of your code
<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
<ul>
<li ng-repeat="x in names">{{x}}</li>
</ul>
</div>
does not have an ng-app
ng-repeat only works within an ng-app

jquery-ui dialog does not show HTML server error message

I want to show a html page which is saved in a string with jquery-ui dialog. Unfortunately no dialog opens.
This is my code:
$(failedRequest.responseText).dialog();
The error message in the js console says:
Uncaught TypeError: Cannot read property 'display' of undefined
I also tried
$('<html><body><h1>A title</h1>And some text.</body></html>').dialog();
which works fine.
I assume there's something in the HTML code which causes .dialog() to fail. This is the compelente HTML code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>EAI Configuration Web :: Status page</title>
<link href="/EAIConfig/styles/design.css" rel="stylesheet" type="text/css" media="all" />
<link href="/EAIConfig/styles/print.css" rel="stylesheet" type="text/css" media="print" />
<link rel="shortcut icon" type="image/x-icon" href="/EAIConfig/img/favicon.ico" />
<link rel="icon" type="image/x-icon" href="/EAIConfig/img/favicon.ico" />
<script type="text/javascript">
function onChangeAutoSessionClose() {
var checked = document.getElementById('autoSessionClose').checked;
$.post("autoSessionClose.action", {autoSessionClose: checked});
};
</script>
</head>
<body id="page-home">
<div id="maincontainer">
<div id="header">
<div class="headerTop">
<div class="logo">
<img src="/EAIConfig/img/galenicaLogo.gif"
title="" />
</div>
<div id="blockMainPopup" style="float:right">
<form id="logout" name="logout" action="logout" method="post">
<a class="item" href="javascript:print()"><img
src="/EAIConfig/img/iconPrint.gif"
alt="Print Page" /> title.print</a>
login.as : ugxnbpluse
<input type="submit" id="logout_logout" name="action:logout" value=""/>
</form>
</div>
<div class="row"></div>
</div>
</div>
<div id="content">
<div class="leftcontent">
<br/>
<ul>
title.mappingDefinition
<li> title.mapping</li>
<li>
title.businessServiceDefinition</li>
<li> title.dataStoreEntity</li>
<li> title.valueConversion</li>
<li> title.conditionalValueConversion</li>
</ul>
<br/>
<ul>
title.messageTypeDefinition
<li>
title.taskMessageType</li>
<li> title.messageType</li>
<li> title.outputConfiguration</li>
<li> title.configurationHeader</li>
<li>
title.startTaskContent</li>
</ul>
<br/>
<ul>
title.administration
<li>
title.contractorDefinition
</li>
<li>
title.partnerGroupList
</li>
<li>
title.holidayCalendar
</li>
<li>
title.exportImport
</li>
<li>
title.lastChange
</li>
<li>
title.translation
</li>
</ul>
<br/>
<ul>
title.reports
<li>
title.reports.partner
</li>
</ul>
</div>
<div class="rightcontent">
<div id="pagetitle">
<h1>
title.eaiConfiguration
-
Status page
</h1>
<h2>
</h2>
</div>
<div class="row">
</div>
<br/><br/><br/>
<p style="font-size: 1.2em;font-weight: bold;margin: 1em 0px;">Internal Server Error</p>
<p>Internal Server Error</p>
<p>You can get technical details here.<br>
Please continue your visit at our home page.
</p>
</div>
</div>
</div>
</body>
</html>
Any ideas about how to get this HTML shown in a dialog?

Ember.js todo app handlebars template issues

I'm very new to Ember and am trying to follow the ToDo app tutorial. However, I am having a hard time generating a handlebar script in my index.html file. Here is what the index file looks pre-handlebars script
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ember.js • TodoMVC</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section>
<section id="todoapp">
<header id="header">
<h1>todos</h1>
<input type="text" id="new-todo" placeholder="What needs to be done?" />
</header>
<section id="main">
<ul id="todo-list">
<li class="completed">
<input type="checkbox" class="toggle">
<label>Learn Ember.js</label><button class="destroy"></button>
</li>
<li>
<input type="checkbox" class="toggle">
<label>...</label><button class="destroy"></button>
</li>
<li>
<input type="checkbox" class="toggle">
<label>Profit!</label><button class="destroy"></button>
</li>
</ul>
<input type="checkbox" id="toggle-all">
</section>
<footer id="footer">
<span id="todo-count">
<strong>2</strong> todos left
</span>
<ul id="filters">
<li>
All
</li>
<li>
Active
</li>
<li>
Completed
</li>
</ul>
<button id="clear-completed">
Clear completed (1)
</button>
</footer>
</section>
<footer id="info">
<p>Double-click to edit a todo</p>
</footer>
<script src="js/libs/jquery-1.10.2.min.js"></script>
<script src="js/libs/handlebars-1.1.2.js"></script>
<script src="js/libs/ember-1.4.0.js"></script>
<script src="js/libs/ember-data.js"></script>
<script src="js/application.js"></script>
<script src="js/router.js"></script>
</body>
</html>
However, when I wrap the handlebars script tag within the body element, the other HTML elements are not rendered properly. The code doesn't run in my browser and I suspect the script is missing a closing element somewhere. I'm not sure where. Does anyone have any pointers. Much appreciated and thank you in advance.
<script type="text/x-handlebars" data-template-name="todos">
<section>
<section id="todoapp">
<header id="header">
<h1>todos</h1>
<input type="text" id="new-todo" placeholder="What needs to be done?" />
</header>
<section id="main">
<ul id="todo-list">
<li class="completed">
<input type="checkbox" class="toggle">
<label>Learn Ember.js</label><button class="destroy"></button>
</li>
<li>
<input type="checkbox" class="toggle">
<label>...</label><button class="destroy"></button>
</li>
<li>
<input type="checkbox" class="toggle">
<label>Profit!</label><button class="destroy"></button>
</li>
</ul>
<input type="checkbox" id="toggle-all">
</section>
<footer id="footer">
<span id="todo-count">
<strong>2</strong> todos left
</span>
<ul id="filters">
<li>
All
</li>
<li>
Active
</li>
<li>
Completed
</li>
</ul>
<button id="clear-completed">
Clear completed (1)
</button>
</footer>
</section>
<footer id="info">
<p>Double-click to edit a todo</p>
</footer>
</script>
I'm not completely sure what the issue is, but I would check that all of your js files are being properly loaded. I actually tried the ToDo demo from here that used JS Bin and I didn't see that it was working. However, after taking that code and placing into a jsfiddle where the sources are loaded in the <head> tag, it actually worked.
Here's a link to the jsfiddle and here a link to the live version. I would inspect the output on the second link and see what the differences are between that and your code.
Hope you get your question resolved!
I faced the same issue while working through the Tutorial.
The trick is in the order of the script includes. Make sure that the framework dependencies are included first and then the application.js and finally the router.js. See below:
<!-- ... Ember.js and other javascript dependencies ... -->
<script src="js/libs/jquery-1.10.2.min.js"></script>
<script src="js/libs/handlebars-1.0.0.js"></script>
<script src="js/libs/ember.js"></script>
<script src="js/libs/ember-data.js"></script>
<script src="js/application.js"></script>
<script src="js/router.js"></script>
You can't write html on < script > element !!

Categories