Load an observablearray from a URL into a template - json

Question

I am pretty new to knockoutJS, have completed their interactive tutorials, it was extremely informative.
I read a few posts, like :
KnockoutJS observableArray with template and foreach
It was quite helpful but I couldn't grasp the whole concept as to how to apply it in my context, cause I am fetching data from URL.
One way I thought of solving the problem is maybe by nesting templates.
Cause two things need to be done
Send the observable array to template
Loop over each element and access it's property so as to display in the tmplate
ToDo :
Load the observablearray(), got from a JSON into the template.
The output should be like this :
https://screenshots.firefoxusercontent.com/images/c72ec9d9-075b-40d0-b8cb-f3a4eca76c0d.png
The rendering element
<div class="row">
<div class="col-sm-12">
<div id="template_wallet" data-bind="template: { name: 'wallets_display_tmp', data: coins() }"></div>
### Template
<script type="text/html" id="wallets_display_tmp">
<h2>Wallets<br>
</h2>
<hr />
<table class="table table-striped table-hover">
<thead>
<tr>
<th class="text-center">Currency Name</th>
<th class="text-center">Symbol</th>
<th class="text-center">Amount</th>
<th class="text-center">Deposit/Withdraw</th>
</tr>
</thead>
<tbody>
<tr data-bind="foreach: coin()">
<td class="text-center" data-bind="text: name"></td>
<td class="text-center" data-bind="text: symbol"></td>
<td class=" options">
<div class="center-block text-center">
// <button type="button" class="btn btn-primary btn-xs text-center pop" data-toggle="modal" data-target=".modal" style="margin:-6px 2px" data-purpose="deposit" data-coin=<%= wallet.get('name') %>><span class="fa fa-plus"></span></button>
// <button type="button" class="btn btn-primary btn-xs text-center pop" data-toggle="modal" data-target=".modal" style="margin:-6px 2px" data-purpose="withdrawal" data-coin=<%= wallet.get('name') %> ><span class="fa fa-minus"></span></button>
</div>
</td>
<td></td>
</tr>
</tbody>
</table>
</script>
</div>
</div>
</body>
<script>
$(document).ready(function() {
function walletCoin(){
this.name = ko.observable();
this.symbol = ko.observable();
this.balance = ko.observable();
}
function WalletViewModel(){
var self = this;
self.coins = ko.observableArray([]);
$.getJSON("https://api.myjson.com/bins/13ed0p", function(allData){
console.log(allData);
var mappedCoins = $.map(allData, function(item){
return new walletCoin(item);
});
self.coins(mappedCoins);
});
}
// var walletBalance = new WalletViewModel();
// ko.components.register('', {
// template: {element: 'wallets_display_tmp'},
// });
ko.applyBindings(new WalletViewModel(), document.getElementById("template_wallet"));
});
</script>
The JSON data is
[
{
"name": "Bitcoin",
"symbol": "BTC",
"balance": 0.001212
},
{
"name": "Ripple",
"symbol": "XRP",
"balance": 123.1212
},
{
"name": "Litecoin",
"symbol": "LTC",
"balance": 13.1212
},
{
"name": "Digibyte",
"symbol": "DGB",
"balance": 1231.1212
}
]
Update : I have added a knockoutJS context debugger and added ko.toJSON($data)
Currently I am getting output like this :

Answer 1

$(document).ready(function() {
function walletCoin(){
this.name = ko.observable();
this.symbol = ko.observable();
this.balance = ko.observable();
}
function WalletViewModel(){
var self = this;
self.coins = ko.observableArray([]);
$.getJSON("https://api.myjson.com/bins/13ed0p", function(allData){
console.log(allData);
for (var i = allData.length - 1; i >= 0; i--) {
console.log(allData[i]);
var mappedCoins = ko.mapping.fromJS(allData[i], walletCoin);
self.coins.push(mappedCoins);
}
});
console.log(self.coins());
}
ko.applyBindings(new WalletViewModel(), document.getElementById("template_wallet"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>
<div class="row">
<div class="col-sm-12">
<hr />
<h2>Debug</h2>
<div data-bind="text: ko.toJSON(WalletViewModel)"></div>
<div id="template_wallet" data-bind="template: { name: 'wallets_display_tmp', foreach:coins }"></div>
<script type="text/html" id="wallets_display_tmp">
<h2>Wallets <br>
<small>Estimated Value: 0.00318249 BTC / 47.39 USD</small>
</h2>
<hr />
<table class="table table-striped table-hover">
<thead>
<tr>
<th class="text-center">Currency Name</th>
<th class="text-center">Symbol</th>
<th class="text-center">Amount</th>
<th class="text-center">Deposit/Withdraw</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-center" data-bind="text: name"></td>
<td class="text-center" data-bind="text: symbol"></td>
<td class="text-center" data-bind="text: balance"></td>
<td class=" options">
<div class="center-block text-center">
// <button type="button" class="btn btn-primary btn-xs text-center pop" data-toggle="modal" data-target=".modal" style="margin:-6px 2px" data-purpose="deposit" data-coin=<%= wallet.get('name') %>><span class="fa fa-plus"></span></button>
// <button type="button" class="btn btn-primary btn-xs text-center pop" data-toggle="modal" data-target=".modal" style="margin:-6px 2px" data-purpose="withdrawal" data-coin=<%= wallet.get('name') %> ><span class="fa fa-minus"></span></button>
</div>
</td>
</tr>
</tbody>
</table>
</script>
<!-- <div class="container">
<canvas id="live_exchange_chart"></canvas>
</div> -->
</div>
</div>
Do check this :
<script>
$(document).ready(function() {
function walletCoin(){
this.name = ko.observable();
this.symbol = ko.observable();
this.balance = ko.observable();
}
function WalletViewModel(){
var self = this;
self.coins = ko.observableArray([]);
$.getJSON("https://api.myjson.com/bins/13ed0p", function(allData){
console.log(allData);
for (var i = allData.length - 1; i >= 0; i--) {
console.log(allData[i]);
var mappedCoins = ko.mapping.fromJS(allData[i], walletCoin);
self.coins.push(mappedCoins);
}
});
console.log(self.coins());
}
ko.applyBindings(new WalletViewModel(), document.getElementById("template_wallet"));
});
</script>
Here is the jsfiddle for the same.

Answer 2

self.coins = ko.computed(function () {
var coins = {};
self.days = '';
$.ajax({
type: "GET",
dataType: "json",
url: yoururl,
data: {},
async: false,
success: function (response) {
if (response.items) {
for (var i = 0; i < response.items.length; i++) {
coins[i] = {
name: response.items[i].name,
symbol: response.items[i].symbol,
balance: response.items[i].balance
};
}
}
},
error: function () {
console.log('error');
}
});
return coins;
});
I am not fully understand your question, but i guess you need something like this?