I want for loop or for each or both codes for learning both ways to make the format like,I want the to acccess the id "list" to append li.
HTML
<div id="list">
<ul>
<li>Mainland China</li>
<li>Hotel Park Inn</li>
....
</ul>
</div>
HTML
<html>
<head>
</head>
<body>
<input data-inline="true" id="submit" type="submit" value="Go">
</body>
</html>
JS
$(function() {
$("#submit").click(function() {
var data='{"restaurant": {"results": [{"name": "The Astor"},{"name": "Mainland China"},{"name": "Bhojohori Manna"},{"name": "6 Ballygunge Place"},{"name": "Zaranj"},{"name": "Hotel Park Inn"},{"name": "Oh! Calcutta"},{"name": "Red Hot Chilli Pepper"},{"name": "Chinoiserie"}]}}';
var json = JSON.parse(data);
alert(json.restaurant.results.length);
alert(json.restaurant.results[0].name);
});
});
I think you just need to add below line inside click function.
var list = $('#list');
jsonData = JSON.parse(data);
jsonData.restaurant.results.forEach(function(i){
list.append('<li>'+i.name+'</li>');
});
EDIT:-
var jsonData = JSON.parse(data);
jsonData.restaurant.results.forEach(function(i){
$('ul').append('<li>'+i.name+'</li>');
});
Related
Using angular and angular-xeditable I have a drop down menu with a number of options from which to select in the 'amenities' array.
Once I save the selections from the drop down and saved them, I want to make it possible for the user to come back to the page and edit previously selected items.
HTML:
<select multiple class="w-select am-dropdown" size="12" data-ng-model="Amenities"
data-ng-options="amenity.amenity for amenity in amenities" required=""></select>
JS:
$scope.amenities = [{amenity: coffee}, {amenity: beer}, {amenity: parking}];
$scope.Amenities = [];
$scope.selectedAmenities = [coffee, beer];//these are amenities saved in the
database that I want to be able to show as selected using the editable form
Have a case as same as this
Add $scope.$watch to put selected value to $scope.selectedValues as below
$scope.$watch('selectedAmenities ', function (nowSelected) {
$scope.selectedValues = [];
if (!nowSelected) {
return;
}
angular.forEach(nowSelected, function (val) {
$scope.selectedValues.push(val.amenity.toString());
});
});
And then use it like below:
select multiple ng-model="selectedValues" class="w-select am-dropdown" size="12" >
<option ng-repeat="amenity in amenities" value="{{amenity.amenity}}" ng-selected="{{selectedValues.indexOf(amenity.amenity)!=-1}}">{{amenity.amenity}}</option>
</select>
Full code at Plunker
Hope it helps you.
do u mean this?
var m = angular.module('m', []).controller('c', ['$scope',
function($scope) {
$scope.avilibleValues = ['a1', 'a2', 'a3', 'a4', 'a5'];
$scope.selected = [];
$scope.last = 'a1';
$scope.selecting = 'a1';
$scope.select = function(it) {
console.log('select:' + it);
$scope.selecting = it;
};
$scope.change = function() {
console.log($scope.last);
$scope.last && $scope.selected.push($scope.last);
$scope.last = $scope.selecting;
};
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="script.js"></script>
<div ng-app="m">
<div ng-controller="c">
<div class="row">
<label>seleted:</label>
<div>
<p ng-repeat="it in selected">
<a ng-click="select(it)">{{it}}</a>
</p>
<div>
</div>
<div class="row">
<label>selet</label>
<select ng-model="selecting" ng-options=" i for i in avilibleValues" ng-change="change()"></select>
</div>
</div>
</div>
<p>
selecting:{{selecting}}
<p>
selected:{{selected}}
<p>
last:{{last}}
<p>
</div>
</div>
I'm trying to add value in students array, but below code isn't working.
js code is --
angular.module('formExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.students=[
'Scarlett Johansson','Jennifer Lawrence','Emma Stone','Kristen Stewart'
];
$scope.add = function(name){
$scope.students.push(name);
};
}]);
html code is --
<body ng-app="formExample">
<div ng-controller="ExampleController">
<p ng-repeat="stud in students">
{{stud}}
</p>
</div>
<input type='text' ng-model="name"/>
<button ng-click="add(name);">add</button>
</body>
Your button and input are not included within the div ng-controller="ExampleController" scope.
<body ng-app="formExample">
<div ng-controller="ExampleController">
<p ng-repeat="stud in students">
{{stud}}
</p>
<input type='text' ng-model="name"/>
<button ng-click="add(name);">add</button>
</div> <!-- close div here -->
</body>
You need to push into $scope.students array, as there is no students array defined in the scope:
$scope.add = function(name) {
$scope.students.push(name);
};
$scope.add = function(name) {
$scope.students.push(name);//
};
I've got the whole questions that I have in my JSON file, but I need only one until the user will click the right answer and go to the next one
HTML template:
<div ng-controller="quizController">
<ul>
<li ng-repeat="q in allData">
<h1 id="question">{{q.question}}</h1>
</li>
</ul>
<div class="answers">
<a class="btn btn-primary"><p>New York</p></a>
<a class="btn btn-warning"><p>Miami</p></a>
<a class="btn btn-success"><p>Washington</p></a>
<a class="btn btn-danger"><p>LA</p></a>
</div>
JS:
app.controller("quizController", function($scope, $http){
$http.get("questions.json")
.then(function(response){
$scope.allData = response.data;
});
});
JSON file:
[
{
"question": "Which is the largest country in the world by population?",
"options": ["India", "USA", "China", "Russia"],
"answer": 2
},
{
"question": "When did the second world war end?",
"options": ["1945", "1939", "1944", "1942"],
"answer": 0
},
{
"question": "Which was the first country to issue paper currency?",
"options": ["USA", "France", "Italy", "China"],
"answer": 3
},
{
"question": "Which city hosted the 1996 Summer Olympics?",
"options": ["Atlanta", "Sydney", "Athens", "Beijing"],
"answer": 0
}
]
You should not use ng-repeat then, since this will just loop through your questions and show them all at once in the UI.
Instead, store your questions array in another variable and then bind your UI to a specific index of that variable.
app.controller("quizController", function($scope, $http){
$scope.allData = [];
//Initially set to first element (question), then you will need to increment in further logic elsewhere probably on a button click handler if the answer is correct
$scope.currentQuestion = $scope.allData[0];
$http.get("questions.json")
.then(function(response){
$scope.allData = response.data;
});
});
This is similar to mindparses approach but goes a little deeper. You can navigate back and forth. It's not full proof but should help you on your way.
HTML
<div ng-app="app" ng-controller="quizController">
<div ng-app="app" ng-controller="quizController">
<p>
<h1 id="question">{{currentQ.question}}</h1>
<div class="answers">
<ul ng-repeat="option in currentQ.options">
<li>{{option}}</li>
</ul>
</div>
</p>
<button ng-click="move(-1)">Previous</button>
<button ng-click="move(1)">Next</button>
</div>
</div>
JS/CONTROLLER
var app = angular.module('app', []);
app.controller("quizController", function ($scope) {
$scope.move = function (direction) {
// you're gonna need an IF block here to stop it from going out of range.
var position = $scope.allData.indexOf($scope.currentQ);
$scope.currentQ = $scope.allData[position + direction];
}
$http.get("questions.json").then(function(response){
$scope.allData = response.data;
$scope.currentQ = $scope.allData[0];
});
});
JSFIDDLE
I'm trying to make a simple angular app which reads json data , but in response I'm only getting "," not data.Any pointers where I m going wrong ? I have attached index.html and abc.json file that i m keepingat server
PFB the code .
HTML:
<body ng-app="sampleApp" ng-controller="ctrl1">
Name:<input type="text" ng-model="name">
<ul>
<li ng-repeat="student in students | filter:name">{{student.name +","+student.empNo}</li>
</ul>
Name:<input type="text" ng-model="newname">
EmpNo:<input type="text" ng-model="newemp">
<input type="button" value="AddMe" ng-click="add()"/>
<div>
<div ng-view></div>
</div>
Javascript:
var x=angular.module('sampleApp',[])
.factory("simpleFactory",function($http){
var factory={};
factory.getStudents=function(){
return $http.get("abc.json");
}
return factory;
})
.controller("ctrl1",function($scope,simpleFactory){
$scope.students=simpleFactory.getStudents();
$scope.add=function(){
$scope.students.push(
{
name:$scope.newname,empNo:$scope.newemp
}
)
}
})
abc.json
[
{"name":"jack","empNo":"1"},
{"name":"Red","empNo":"2"},
{"name":"Jill","empNo":"3"}
]
getStudents is asynchronous. You should retrieve and assign students through the callback handler.
.factory("simpleFactory",function($http){
var factory={};
factory.getStudents = $http.get("abc.json");
return factory;
})
.controller("ctrl1",function($scope,simpleFactory){
simpleFactory.getStudents().then(function(result) {
$scope.students= result.data;
});
...
})
Nearly right. getStudents in fact returns you a 'Promise', not the data itself. You have to use that Promise to get your data:
simpleFactory.getStudents().then(function(data) {
$scope.students=data
// $scope.students=data.data // you may need this given your feedback
});
I am learning Ember JS and Handlebars JS so I am very new to this. I am having an issue trying to loop through the following JSON.
Here is my JSON:
{
"sgt_rules": {
"app_tags": {},
"city": [],
"consumer_tags": [],
"device_tags": {
"os": [
"ios"
]
},
"participation": null,
"registration": null
}
}
This is my handlebars template:
<h2>{{controllers.segment.sgt_name}}</h2>
<script type="text/x-handlebars" data-template-name="pull">
<ul>
<li>{{getsegmentrules}}</li>
</ul>
</script>
The ember helper function in case I need to modify it:
import Ember from 'ember';
var controller = Ember.Controller.extend({
needs: ['segment'],
getsegmentrules: function () {
var model = this.get('content').get('sgt_rules');
}.property()});
export default controller;
I have tried this but it doesn't work:
<script type="text/x-handlebars" data-template-name="pull">
<ul>
<li>{{controllers.segment.sgt_rules}}</li>
{{#each segment in controllers.segment.sgt_rules}}
<li>App Tags: {{segment.app_tags}} <br /> City: {{segment.city}} <br />
Consumer Tags: {{segment.consumer_tags}} <br /> Device Tags: {{segment.device_tags}} <br />
Participation: {{segment.participation}} <br /> Registration: {{segment.registration}} <br />
<ul>
{{#each obj in segment.device_tags}}
<li>{{obj.os}}</li>
{{/each}}
</ul>
</li>
{{/each}}
</ul>
</script>
What am I missing here? Do I need to write any helper function as well?
shouldn't you return a value here?
getsegmentrules: function () {
var model = this.get('content').get('sgt_rules');
return model;
}.property()});
Also where are you setting the JSON data?