I am using Knockout.js as a way to dynamically update a view from a JSON response. The JSON looks like the following:
var data = {
"Properties": {
"Engine Capacity": "1499cc",
"Doors": 3,
"Extras": [
"LED lights",
"4WD"
],
"Model": "123a"
}
};
I have figured out a way in JavaScript to construct my <li> elements:
for (var field in data['Properties']) {
var value = data['Properties'][field];
var out = '<li>' + field + ': ' + value + '</li>';
console.log(out);
// <li>Engine Capacity: 1499cc</li>
// <li>Doors: 3</li>
}
I know this isn't an ideal way as constructing HTML in JavaScript isn't best practice. There is a way to print out the value in Knockout but with hardcoded values:
<ul data-bind="foreach:$root.Properties">
<li data-bind="text:$data:Doors"></li>
<li data-bind="text:$data.Model"></li>
But I was wondering whether it could be possible to get Knockout.js to look like what I'm returning in the JavaScript code?
Here's how you can do it:
var data = {
"Properties": {
"Engine Capacity": "1499cc",
"Doors": 3,
"Extras": [
"LED lights",
"4WD"
],
"Model": "123a"
}
};
var viewModel = {
data: ko.mapping.fromJS({"Properties": data.Properties})
};
ko.applyBindings(viewModel);
<ul data-bind="foreach: data.Properties">
<li>
<b data-bind="foreachprop: props"> :
<span data-bind="value"> </span>
</b>
</li>
</ul>
More reference:
How to use knockout to iterate over an object (not array)
Mapping: foreach binding work only the first time
Related
I am quite new to Vue and am attempting to retrieve a JSON response from an API and then print this on my page.
This is what I have so far:
<body>
<div id="mystats" class="container">
<h1>My Top Tracks</h1>
<ol>
<li v-for="track in tracks">#{{ track.name }}</li>
</ol>
<pre>#{{ tracks|json }}</pre>
<button v-on:click="fetchStats">Fetch stats</button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.0.3/vue-resource.min.js"></script>
<script type="text/javascript">
$vue = new Vue({
el: '#mystats',
data: {
tracks: [],
},
methods: {
fetchStats: function()
{
this.$http.get('/mystatsdata', {params: {type: 'tracks'}}).then((response) => {
this.tracks.push(response.body);
console.log(this.tracks.name);
}, (response) => {
// error callback
});
}
}
})
</script>
</body>
Below is the response I am getting back:
[
[
{
"name": "Falling Away - Acoustic (Bonus Track)",
"track_number": 8,
"type": "track",
}
]
]
The issue is that the:
<ol>
<li v-for="track in tracks">#{{ track.name }}</li>
</ol>
is not printing out the track name.
There's no error in my console, and so being a little new to Javascript and Vue.js I'm not really sure where I am going wrong.
How do I get the name to display?
Edit
Here is the response with more than one entry (limited to 2 currently):
[
[
{
"name": "Falling Away - Acoustic (Bonus Track)",
"track_number": 8,
"type": "track",
},
{
"name": "Perfect Strangers",
"track_number": 1,
"type": "track",
}
]
]
The response that you are getting back is an array containing another array - which in turn contains the actual objects representing your tracks.
So inside: <li v-for="track in tracks">#{{ track.name }}</li> , the track refers to the inside array and not to each object.
For quick-fix, you can change your code to:
<li v-for="track in tracks[0]">#{{ track.name }}</li>
and try.
But the proper fix would be to fix the backend, to return the result as a single array of objects.
As #craig_h suggested it looks like you're receiving an array of array of objects instead of an array of objects.
I would recommand you to send a better formatted json like this:
[
{
"name": "Falling Away - Acoustic (Bonus Track)",
"track_number": 8,
"type": "track",
},
{
"name": "Falling Away2 - Acoustic (Bonus Track)",
"track_number": 9
"type": "track",
}
]
If you don't have access to the backend, using this.tracks.push(response.body[0]) in your fetchStats method should do the trick.
I have an object and within this object I have items and one of the items is an array which also contains objects. A sample of the data is shown below.
I am using knockout to bind this data to the view so I think I need to implement a double loop for returning the objects and the objects within the child array to be able to bind them in the view.
Sample data:
"singers": {
"ijiyt6ih": {
"id": ObjectId('ijiyt6ih'),
"name": "John",
"songs": [
{
"id": ObjectId('okoiu8yi'),
"songName": "Hello There",
"year": "1980"
},
{
"id": ObjectId('sewfd323'),
"songName": "No More",
"year": "1983"
}
]
},
"98usd96w": {
"id": ObjectId('98usd96w'),
"name": "Jack",
"songs": [
{
"id": ObjectId('iew342o3'),
"songName": "Hurry Up",
"year": "1985"
}
]
}
}
I need to find a way to appropriately loop through this so that I can modify the returned data to bind it to the viewModel using knockout.
Here is how my viewModel looks like:
singersViewModel = function(data) {
var self = {
singerId: ko.observable(data.id),
singerName: ko.observable(data.name),
songName: ko.observable(...),
songYear: ko.observable(...)
};
I am not sure if I will have to return two different sets of data or not.
As for the looping. I was able to loop and return the list of singers to display on the page but I am not able to get the list of songs displayed within each singer.
Here is my loop so far:
var self = {},
singer,
tempSingers = [];
self.singers = ko.observableArray([]);
for (singer in singers) {
if (singers.hasOwnProperty(singer)) {
tempSingers.push(new singersViewModel(singers[singer]));
}
}
self.singers(tempSingers);
I tried to duplicate the same type of loop for songs within this loop but i would get an error using hasOwnProperty because songs is an array.
In the included snippet you can see how you can map the original data to a viewmodel that can be bound to a view.
I've left the ids as regular properties, and converted the names into observables, so thatthey can be edited. At the bottom you can see the current viewmodel state.
There is also a sample view which iterates the list of singers, and also the list of song within each singer.
As you can see I'm implementing the solution using mapping. For mapping you need to implement a callback that receives each original object and returns a new one with a new structure. For example this part of the code
_.map(_singers, function(singer) {
return {
id: singer.id,
name: ko.observable(singer.name),
// ... songs:
})
iterates over each singer (the sample data in the question), and for each one creates a new object with the id, an observable which includes the name (and the mapping of songs, which I don't show in this fragment).
NOTE: I'm using lodash, but many browsers support map natively as an array function
var ObjectId = function (id) { return id; }
var singers = {
"ijiyt6ih": {
"id": ObjectId('ijiyt6ih'),
"name": "John",
"songs": [
{
"id": ObjectId('okoiu8yi'),
"songName": "Hello There",
"year": "1980"
},
{
"id": ObjectId('sewfd323'),
"songName": "No More",
"year": "1983"
}
]
},
"98usd96w": {
"id": ObjectId('98usd96w'),
"name": "Jack",
"songs": [
{
"id": ObjectId('iew342o3'),
"songName": "Hurry Up",
"year": "1985"
}
]
}
};
var SingersVm = function(_singers) {
var self = this;
self.singers = _.map(_singers, function(singer) {
return {
id: singer.id,
name: ko.observable(singer.name),
songs: _.map(singer.songs, function(song) {
return {
name: ko.observable(song.songName),
id: song.id
};
})
};
});
return self;
};
var vm = new SingersVm(singers);
//console.log(vm);
ko.applyBindings(vm);
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-bind="foreach: singers">
<div>
<input data-bind="value: name"/> (<span data-bind="text: id"></span>)
<ul data-bind="foreach:songs">
<li>
<input data-bind="value: name"/> (<span data-bind="text: id"></span>)
</li>
</ul>
</div>
</div>
<pre data-bind="html: ko.toJSON($root,null,2)">
</pre>
Im kinda new to Angular/ JSON Objects and i'm trying to get something from a nested object.
That is not so hard, but the problem is that the JSON object has an that changes on the fly.
Below an example of 1 object from a complete list of JSON objects. As you can see this part of a larger object.
What i want is the task.assignment.name for each task in the ng-repeat, but i cant get to the assignment.name because of the integer that's between the assignment and name.
Look at my object:
{
"project-45": {
"label": "Bar",
"url": "http://someurl.com/api",
"assignments": {
"5147": {
"id": 5147,
"type": "Task",
"project_id": 45,
"assignee_id": 9,
"label_id": 27,
"category_id": 0,
"milestone_id": 0,
"name": "assignmentname",
"body": "<p>body.</p>",
"created_on": "2015-06-17 13:40:31",
"age": 6,
"created_by_id": 66,
"created_by_name": "Jelle",
"created_by_email": "jelle#example.com",
"due_on": "2015-06-19",
"priority": 0,
"task_id": 81,
"project": "Bar"
}
}
}
}
project-75": {
"label": "Another",
"url": "http://mijn.example.com/api",
"assignments": {
"5153":
...
This is my controller:
var main = angular.module("main", []);
main.controller("mainCntrl", function($scope, $http){
var apiUrl = "http://my.example.com/api.php?&format=json&";
var apiKey = "&auth_api_token=somekey";
var onUserComplete = function(response){
$scope.user = response.data;
console.log("User Data loaded");
}
var onTasksComplete = function(response){
$scope.tasks = response.data;
console.log("Tasks loaded");
}
$http.get(apiUrl + "path=my-tasks" + apiKey).then(onTasksComplete);
$http.get(apiUrl + "path=people/1/users/9" + apiKey).then(onUserComplete);
}
);
and finally the index.html file with the ng-reapter
<div class=" block full border">
<h3>Active tasks</h3>
<ul ng-repeat="task in tasks">
<li>
<ul>
<li>{{$index+1}}</li>
<li>Project: {{task.label}}</li>
<li>task name: {{task.assignments.name}}</li> <!-- Doesnt work -->
<li>task description: {{task.assignments.body}}</li> <!-- Doesnt work -->
</ul>
</li>
</ul>
</div>
Thanks!
<div class=" block full border">
<h3>Active tasks</h3>
<ul ng-repeat="task in tasks">
<li>
<ul ng-repeat="assignment in task.assignments">
<li>{{$index+1}}</li>
<li>Project: {{assignment.label}}</li>
<li>task name: {{assignment.name}}</li> <!-- Doesnt work -->
<li>task description: {{assignment.body}}</li> <!-- Doesnt work -->
</ul>
</li>
</ul>
</div>
I'm trying to print out each array item from a property in an object:
{
position:"Finance Office Assistant",
employer:"Washtenaw County Finance Department",
location:"Ann Arbor, MI",
start_date:"2012",
current: false,
end_date:"2012",
duties: [
"Item 1",
"Item 2",
"Item 3"
]
},
This object is in an array, with several other objects. I'm trying to create a function that loops through all of the objects and prints out the duties array items in an unordered list with the exact number of list items and array items.
Here is the function I'm trying to write to do the task
$scope.dutyList = function() {
var arrayLength = $scope.duties.length;
while (arrayLength > 0) {
console.log("dutyList run")
document.write("<li> {{ dutyList }} </li>");
--arrayLength;
}
}
You don't need a function to handle displaying data like this. Angular's ngRepeat is for this. To access the second level of of your data set you can nest two repeats in your unordered list. The first one (in a div) repeats the first layer of your data, and exposes the second layer, which repeat in the <li> tag:
<ul>
<div ng-repeat="d in data">
<li ng-repeat="duty in d.duties">{{duty}}</li>
</div>
</ul>
Plunker
As a general rule, you don't want to write directly to the document when using a framework like Angular. Instead, you should use the built in templating system and directives to render your page.
I'm making some assumptions about the end goal here, but, assuming the array of objects can be accessed by the controller and attached to the scope, you could print your unordered list of duties for each position using something like the following.
angular.module('myApp', []).controller('myCtrl', function($scope){
$scope.foo = [{
position:"Finance Office Assistant",
employer:"Washtenaw County Finance Department",
location:"Ann Arbor, MI",
start_date:"2012",
current: false,
end_date:"2012",
duties: [
"Item 1",
"Item 2",
"Item 3"
]
}, {
position:"Another Position",
employer:"Another Employer",
location:"Ann Arbor, MI",
start_date:"2012",
current: false,
end_date:"2012",
duties: [
"2nd Object, Item 1",
"2nd Object, Item 2",
"2nd Object, Item 3"
]
}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='myApp' ng-controller='myCtrl'>
<div ng-repeat='bar in foo'>
<h1>{{ bar.position }}</h1>
<ul>
<li ng-repeat='duty in bar.duties'>
{{ duty }}
</li>
</ul>
</div>
</div>
I have SQLite table with columns id and name. I return array of those rows like json from autocomplete.php page. How to fill select with options ( drop down list ) with this json using jquery and JavaScript ? I am new to JavaScript and JQuery, I googled but didn't find how. In ASP.NET this is easy but here I don't know. Would somebody help ?
This is example of my JSON, can be much longer.
[
{
"id": "1",
"name": "test"
},
{
"id": "1",
"name": "test"
}
]
HTML:
<select id="sel">
</select>
JavaScript:
$(function() {
var data = [
{
"id": "1",
"name": "test1"},
{
"id": "2",
"name": "test2"}
];
$.each(data, function(i, option) {
$('#sel').append($('<option/>').attr("value", option.id).text(option.name));
});
})
Here's a working example. http://jsfiddle.net/ms2Ma/
Try this, This will give you an option to have any number of dropdown boxes and JSON nodes to configure dropdown boxes.
You need to follow few steps:
Create an array of dropdown boxes.(e.g. if you have to configure a phone then you should be using dropdown of color, memory etc.)
Create a JSON object as it is created in code. Dont change the configurable items name which starts with "level1" and end with any number of nodes, As it has to be sync with the index of items of array you are creating in the first place.
Here is the data:
var Dropdowns = ["Model", "Color", "Memory","design","covers","music"];
var Data ={"phones":[
{
"oid":":000000F0:00000458:",
"level1":"3G",
"level2":"white",
"level3":"16GB",
"level4":"slim",
"level5":"Back cover",
"level6":"headphone",
"price":"£568.63",
"addToCart":"#Cart1"
},
{
"oid":":000000F0:000003DA:",
"level1":"3G",
"level2":"black",
"level3":"16GB",
"level4":"slim",
"level5":"Flip cover",
"level6":"headphone",
"price":"£615.79",
"addToCart":"#Cart7"
}]};
See the full working code here:
https://jsfiddle.net/raju_sumit/681ppgq0/5/
Try this :)
Javascript:
$.getJSON("/array.json",
function (json) {
$.each(json,
function (key, value) {
$("#id-select").append("<option value='" + value.c + "'>" + value.d + "</option>");
});
});
A pure Javascript solution: this snippet shows how to populate a dropdown select from JSON data (using id as value and name as text.
The code creates a new Option object for each item in the JSON data and appends it to the select element with appendChild(). map is used in place of a for loop.
let data = [{
"id": "1",
"name": "name_1"
},
{
"id": "2",
"name": "name_2"
}
];
var selectElement = document.getElementById('mySelect');
data.map(item => mySelect.appendChild(new Option(item.name, item.id)).cloneNode(true));
<select id="mySelect" onchange="alert(this.value)"></select>