Filing Bootstrap Datatable from remote JSON file - json

I am trying to fill the table (Bootstrap datatable) with the data from remote JSON file.
JSON file is located at https://ba.ekapija.com/company/tender-winner-json/103510/pobede-na-tenderima?hash=28cd4a0e334aec8f84a94f30bb340e7f
And this is the function I use:
$(document).ready( function() {
$('#twodotsmediatable').dataTable( {
"data": "https://ba.ekapija.com/company/tender-winner-json/103510/pobede-na-tenderima?hash=28cd4a0e334aec8f84a94f30bb340e7f",
"columns": [
{ "data": "tender" },
{ "data": "url" },
{ "data": "date" },
{ "data": "amount" },
{ "data": "company" },
{ "data": "address" }
]
} );
$('.dataTables_length').addClass('bs-select');
});
I have also tried with:
"ajax": "https://ba.ekapija.com/company/tender-winner-json/103510/pobede-na-tenderima?hash=28cd4a0e334aec8f84a94f30bb340e7f"
But with no luck in both cases. Please help me to find where am I making mistake.

You should always use ajax.url :
$('#twodotsmediatable').dataTable( {
ajax: {
url: 'https://ba.ekapija....'
},
columns: [ .. ]
})
You cannot overcome request blocking in the browser, but you can get the desired JSON through a serverside proxy. If your server support PHP a proxy.php could look like this :
<?
echo file_get_contents($_GET['url']);
?>
Get data via proxy :
$('#twodotsmediatable').dataTable( {
ajax: {
url: 'proxy.php?url=https://ba.ekapija....',
dataSrc: function(d) {
return d[0];
}
},
columns: [ .. ]
})
NB: Use of dataSrc is needed since the JSON seem to be on the form [[{ item, item, .. } ]]

Related

Load multiple JSON object

I am trying to load multiple JSON object from one file, but my attempts failed.
Here is my code which run to error when I tried to load .JSON file.
$(document).ready(function(){
$.ajax({
url: "..data.json",
method: "GET",
success: function(data) {
// do something
},
error: function(data) {
console.log('error');
}
});
});
The file format what I am trying to load is the following:
[{"id_first":"1","data_first":"1"},{"id_first":"2","data_first":"2"}] [{"id_second":"1","data_second":"1"},{"id_second":"2","data_second":"2"}]
Is there any solultion for this problem? Thanks for helps in advance!
i think you need to change the json schema like this at the backend.
[
[{
"id_first": "1",
"data_first": "1"
}, {
"id_first": "2",
"data_first": "2"
}],
[{
"id_second": "1",
"data_second": "1"
}, {
"id_second": "2",
"data_second": "2"
}]
]
it more easier for you to process the data.

angularJS $resource response is both array AND object

got this json file:
[
{
"name": "paprika",
"imgSrc": "img/paprika.jpg"
},
{
"name": "kurkku",
"imgSrc": "img/kurkku.jpg"
},
{
"name": "porkkana",
"imgSrc": "img/porkkana.jpg"
},
{
"name": "lehtisalaatti",
"imgSrc": "img/lehtisalaatti.jpg"
},
{
"name": "parsakaali",
"imgSrc": "img/parsakaali.jpg"
},
{
"name": "sipula",
"imgSrc": "img/sipuli.jpg"
},
{
"name": "peruna",
"imgSrc": "img/peruna.jpg"
},
{
"name": "soijapapu",
"imgSrc": "img/soijapapu.jpg"
},
{
"name": "pinaatti",
"imgSrc": "img/pinaatti.jpg"
}
]
Which I successfully fetch in a factory:
factory('getJson', ['$resource', function($resource) {
return $resource('json/vegs.json', {}, {
query: {method:'GET', isArray:true}
});
}]);
in my Controller I can get the json's file content:
var vegs = getJson.query();
$scope.vegs = vegs;
console.log(vegs)
console.log(typeof vegs)
The weird part is the first console.log produces an array of objects, as expected.
The second console says it's an "object", and not an array.
I can get the .json content to my view using {{vegs}}, and I can use ng-repeat as well, tho in the controller I can't do vegs[0] or vegs.length. It comes out empty.
I'm breaking my head on this for over 3 hours now :)
This isn't an 'answer'. Just an observation on one part of your issue. (Sorry, can't comment yet...new to stackoverflow).
Just a note on your comment that "The second console says it's an "object", and not an array." Using typeof on an array will always return "object".
There are various (and debated, it seems) ways to test if it's an array--Array.isArray(obj) for example.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray

Restangular - custom search - search within an array

Lets assume I have an mongodb items collection looking like this (MongoLab):
{
"_id": {
"$oid": "531d8dd2e4b0373ae7e8f505"
},
"tags": [
"node",
"json"
],
"anotherField": "datahere"
}
{
"_id": {
"$oid": "531d8dd2e4b0373ae7e8f505"
},
"tags": [
"ajax",
"json"
],
"anotherField": "datahere"
}
I would like to get all items where a node is within the tags array.
I've tried the below, but no success - it is returning all items - no search performed?
Plunker demo : http://plnkr.co/edit/BYj09TOGyCTFKhhBXpIO?p=preview
// $route.current.params.id = "node" - should give me only 1 record with this tag
Restangular.all("items").customGET("", { "tags": $route.current.params.id });
Full example, return same record for both cases:
var all = db.all('items');
// GET ALL
all.getList().then(function(data) {
$scope.all = data;
console.log(data);
});
// SEARCH for record where "tags" has got "node"
all.customGET('', { "tags": "node"}).then(function(data) {
$scope.search = data;
console.log(data);
});
Any suggestion would be much appreciated.
According to Mongolab REST API Documentation you have to pass the query object with the q parameter. In your case it is q={"tags":"node"}.
Using Restangular it will be like this:
Restangular.all("items").customGET('', { q: {"tags": "node"}})

Extracting json object and filling in user label

[{"id":1,"name":"ABC"},{"id":2,"name":"XYZ"}]
This is how the data is returned by the controller in json format
I want to store it in the following format:
var json = {
"users": [
{ "id": "1", "name": "ABC" },
{ "id": "2", "name": "XYZ" },
]
}
Following is the code I have used but doesnt work.
var json =
{
"users": $.getJSON("#Url.Action("SearchCMSAdmins")")
}
$("#DistributorCMSAdmin").tokenInput("#Url.Action("SearchWithName")", {
theme: "facebook",
preventDuplicates: true,
prePopulate:json.users
});
Any help is appreciated. Thanks in advance.
$.getJson is asynchronous, so you need to use the success callback for getting the response and doing the operation. Try this INstead.
$.getJSON("#Url.Action("SearchCMSAdmins")",function(data){
var json= {"users":data};
$("#DistributorCMSAdmin").tokenInput("#Url.Action("SearchWithName")", {
theme: "facebook",
preventDuplicates: true,
prePopulate:json.users
});
});

Ember.js / nested json / cannot get data displayed

making first attempt to master Ember.js atm. I'm trying to make a simple CMS, but for some reason I have a problem with getting any data from json displayed. I've already switched from Fixture to RESTAdapter, but I am still stuck with
Error: assertion failed: Your server returned a hash with the key timestamp but you have no mapping for it.
Here's my js code:
App.Store = DS.Store.extend(
{
revision:12,
adapter: 'DS.RESTAdapter'
}
);
App.Menucategory = DS.Model.extend({
timestamp: DS.attr('number'),
status: DS.attr('string')
});
App.MenucategoryRoute = Ember.Route.extend({
model: function() {
return App.Menucategory.find();
}
});
DS.RESTAdapter.reopen({
url: <my url>
});
DS.RESTAdapter.configure("plurals", {
menucategory: "menucategory"
});
Trying to access it with:
<script type="text/x-handlebars" id="menucategory">
{{#each model}}
{{data}}
{{/each}}
</script>
My json structure:
{
"timestamp": 1366106783,
"status": "OK",
"data": [
{
"name": "starters",
"id": 1
},
{
"name": "main dishes",
"id": 2
}]}
Thank you in advance for any help you can provide.
By default the RESTAdapter expects your API to be in a specific format, which your API doesn't conform to, if you can modify your API, you need to get it to return in this format, otherwise you'll need to customize the adapter.
Expected Format (based on your JSON):
{
"menucategory": [
{
"name": "starters",
"id": 1
},
{
"name": "main dishes",
"id": 2
}
],
"meta": {
"timestamp": 1366106783,
"status": "OK",
}
}