How to get array from json footable - javascript

I'm trying to get the data with json to generate a footable table with pagination but it's not working.
my code actualy look like this.
sorry my bad english.
my index.json is returning it
{
Cartas: [
{
id: 3,
user_id: 1,
status: "2",
banco_cartas: null,
nome: "teste",
contrato: "",
grupo: "430",
cota: "3332",
credito_atual: 154371.02,
prazo_original: "",
prazo_atual: "126",
valor_parcela: "0",
pc_pago: 1,
pc_fc: 0,
valor_pago: 154371.02,
saldo_devedor: null,
taxa: 0,
data_compra: "2003-03-28T00:00:00+00:00",
created: "2017-06-22T17:39:23-03:00",
data_contemplacao: "2016-12-20T00:00:00+00:00",
data_entrega: null
},
{
id: 4,
user_id: 1,
status: "2",
banco_cartas: null,
nome: "CAS REP comerciais",
contrato: "",
grupo: "240",
cota: "320",
my jquery to load the json in footable
jQuery(function($){
$('#custom-ui-example').footable({
"columns": [
{ name: "nome",
title: "Nome"},
{ name: "credito_atual",
title: "Crédito Atual"},
{ name: "status",
title: "Status"}
],
"rows": $.get("index.json")
})};
my html
<table class="table" id="custom-ui-example" data-paging="true"></table>

Index.json should return array of objects, in your case it is returning object.
The format of the json should be
[{'id': '3'},{'id': '4'}]
Pagination seems to work fine.
Find the working fiddle here: https://jsfiddle.net/qwwjs7j3/

first of all, you should check if your json is valid. you can do that here for example: https://jsonformatter.curiousconcept.com/
then you can should make the get-call using:
$.get({
url: 'index.json'
}).done(function(data) {
data = JSON.parse(data);
});
the return data is hold in the data object of the callback function.

Related

How to access an element in a JSON array in typescript?

[I have a JSON array that contains some values,How can i retrieve the IsDefault value from this array.][1]
I have tried userDefaultPagePreference[0].Isdefault but i am getting isDefault Undefined
Object
userDefaultPagePreference : Array(1)
0 :
date: "2018-04-17T15:48:42.66"
defaultUrl: null
error: []
id:3
isDefault:true
pageName: "ChangeMyAccountSettings"
userId: "e8dfee00-6224-4a29-851e-7c10343eba9a"
Define your variable like this
let userDefaultPagePreference: any[1] = [{
0: null,
date: "2018-04-17T15:48:42.66",
defaultUrl: null,
error: [],
id: 3,
isDefault: true,
pageName: "ChangeMyAccountSettings",
userId: "e8dfee00-6224-4a29-851e-7c10343eba9a"
}];
And Test userDefaultPagePreference[0].isDefault like this
console.log(userDefaultPagePreference[0].isDefault)
Observation :
You are trying to access Isdefault but it should be isDefault.
DEMO
var obj = {
"userDefaultPagePreference": [{
"date": "2018-04-17T15:48:42.66",
"defaultUrl": null,
"error": [],
"id": 3,
"isDefault": true,
"pageName": "ChangeMyAccountSettings",
"userId": "e8dfee00-6224-4a29-851e-7c10343eba9a"
}]
};
console.log(obj.userDefaultPagePreference[0].isDefault);
Accessing an element in a JSON array in typescript here will be like this:
userDefaultPagePreference[0]['Isdefault']

Accessing Key Value Pair in JSON data results

I haven't needed to access JSON data so I'm a bit stumped. I've validated the data using a JSON formatter and it is valid so I know that is good.
All I'm trying to do is retrieve the data and populate a select box (specifically x-editable).
In there example, they provide:
$('#id').editable({
source: [
{value: 1, text: 'Male'},
{value: 2, text: 'Female'}
]
});
Yes, I could throw the 50 states in there but I'd like to use this same approach for other select boxes I plan on implementing.
Here is the datafeed I'm currently getting back from my JSON call:
{
"data": [{
"stateID": 1,
"stateAbbr": "AL",
"state": "Alabama"
}, {
"stateID": 2,
"stateAbbr": "AK",
"state": "Alaska"
}, {
"stateID": 3,
"stateAbbr": "AZ",
"state": "Arizona"
}, {
"stateID": 51,
"stateAbbr": "WY",
"state": "Wyoming"
}]}
My function snippet that I'm working with is:
$.getJSON("test.html?format=json",function(data){
statesArr = statesArr.concat(data);
});
Ideally, I'd like to make the statesArr look like this:
source: [
{value: 1, text: 'Alabama'},
{value: 2, text: 'Alaska'},
...
{value:50, text: 'Wyoming'}
]
But I'm at a loss on what to do from here. The format of the data feed, {"data is throwing me off. I'm used to getting data pretty much like X-Editable is looking for.
I am assuming here that resp is the response. And resp has data property. If I have misunderstood you, please tell me so.
var statesArr;
$.getJSON('test.html?format=json', function(resp){
statesArr = resp.data.map(function(state){
return {
value: state.stateID,
text: state.state
}
});
});
/* somewhere else later; make sure that statesArr is set */
$('#id').editable({
source: statesArr
});

How to parse a Non-Json data hemera

I am new to Json and JavaScript. Currently I have a url which returns a JSON response. But the problem is that, It is not in correct format. Please see my response below
var pd={ player:
{ id: 363609002,
game: 'bf4',
plat: 'pc',
name: 'm4jes',
tag: 'BPt',
dateCheck: 1487204427149,
dateUpdate: 1474581052618,
dateCreate: 1384980182606,
dateStreak: 1474581052618,
lastDay: '20160715',
country: '',
countryName: null,
rank:
{ nr: 121,
imgLarge: 'bf4/ranks/r121.png',
img: 'r121',
name: 'Major General II',
needed: 16110000,
next:
{ nr: 122,
imgLarge: 'bf4/ranks/r122.png',
img: 'r122',
name: 'Major General III',
needed: 16750000,
curr: 16720600,
relNeeded: 640000,
relCurr: 610600,
relProg: 95.40625 } },
score: 16724643,
timePlayed: 1476950,
uId: '2832665149467333131',
uName: 'm4jes',
uGava: '721951facb53ed5632e196932fb6c72e',
udCreate: 1319759388000,
privacy: 'friends',
blPlayer: 'http://battlelog.battlefield.com/bf4/soldier/m4jes/stats/363609002/pc/',
blUser: 'http://battlelog.battlefield.com/bf4/user/m4jes/',
editable: false,
viewable: true,
adminable: false,
linked: false },}
from the above response I have to get the output as :
{
game: 'bf4',
plat: 'pc',
name: 'm4jes',
tag: 'BPt',
score: 16724643,
timePlayed: 1476950
}
By which method I can get the required out in Javascript
First of all the URL is not returning a JSON response but a JS object literal. The difference is explained here.
You have to get the string from the url. You can use the jQuery method get():
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
var jqxhr = $.get( "https://api.bf4stats.com/api/playerInfo?plat=pc&name=m4jes&output=js", function() {
//Insert the rest of the code here
});
</script>
Then, jqxhr.responseText is the string which correspond to the object we want. With eval, we transform the string into an object:
pd = eval(jqxhr.responseText);
So here we have an object literal with all the pairs name/value. You can access the values you want by using the dot notation. If you want to get the name of the game for example, you can write this:
pd.player.game
So this leads to :
var myNewObject = {
game: pd.player.game,
plat: pd.player.plat,
name: pd.player.name,
tag: pd.player.tag,
score: pd.player.score,
timePlayed: pd.player.timePlayed,
}
Then, you have to transform this JS object literal into a JSON by using the JSON.stringify() method:
console.log(JSON.stringify(myNewObject, null, '\t'));
It returns what you want:
{
"game": "bf4",
"plat": "pc",
"name": "m4jes",
"tag": "BPt",
"score": 16724643,
"timePlayed": 1476950
}
So here is the full code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
var jqxhr = $.get( "https://api.bf4stats.com/api/playerInfo?plat=pc&name=m4jes&output=js", function() {
pd = eval(jqxhr.responseText);
var myNewObject = {
game: pd.player.game,
plat: pd.player.plat,
name: pd.player.name,
tag: pd.player.tag,
score: pd.player.score,
timePlayed: pd.player.timePlayed,
}
console.log(JSON.stringify(myNewObject, null, '\t'));
});
</script>

Creating table with Mustache JS

I've just started to learn about Mustache, but I don't understand how can I do this:
I have this JSON object :
var columnsDefinition = {
"columns": [
{
"header": 'First name',
"values": ['John', 'Jack', 'Abe', 'Adelle', 'Jim', 'Andrew', 'Matthew'],
"type": 'text'
},
{
"header": 'Last name',
"values": ['Carpenter', 'Reaper', 'Lincoln', 'Aidan', 'Raynor', 'Doe'],
"type": 'text'
},
{
"header": 'Profession',
"values": ['butcher', 'doctor', 'farmer', '', 'pilot', 'singer', ''],
"type": 'select'
},
{
"header": 'Employed',
"values": [true, false, true, true, false],
"type": 'checkbox'
}
],
"search": true
};
I want to create this :
This is what I've tried, but I don't know how to put values on each column, not on each row.
this.testDiv = $("#testDiv");
this.header = "{{#columns}}<th>{{header}}</th>{{/columns}}";
this.body = "{{#columns}}<tr>{{#values}}<td>{{.}}</td><{{/values}}/tr>{{/columns}}";
this.html = Mustache.to_html(this.header, this.columnsDefinition);
this.html2 = Mustache.to_html(this.body, this.columnsDefinition);
$("#testDiv table thead tr").append(this.html);
$("#testDiv table tbody").append(this.html2);
How can I create the table above? Thank you.
I don't believe this can be done out of the box.
If you can't modify the JSON object that you currently have, you're better off generating another JSON object that will pivot the data and feed that one to Mustache.

ng-repeat doesn't work on json array

I have this json array
[

{
Company: 
{
id: "19",
features_id: null,
features: "a:6:{i:1;s:1:"1";i:2;s:1:"2";i:3;s:1:"3";i:4;s:1:"0";i:5;s:1:"0";i:6;s:1:"6";}"
},
User: [ ]
},
-{
Company: 
{
id: "20",
features_id: null,
features: "a:6:{i:1;s:1:"1";i:2;s:1:"2";i:3;s:1:"3";i:4;s:1:"4";i:5;s:1:"5";i:6;s:1:"6";}"
},
User: 
[

{
id: "1",
group_id: "1",
type: null
}
]
}]
for somereason I cant get data into my div. Anyhelp will be appreciated. here is the jsfidler
http://jsfiddle.net/4Y9L3/
That JSON is not valid. Also, your template is not going to output anything visible unless you put some bind tags in the repeater like {{Company.Company.id}} for example.
You are using $.ajax(), so Angular doesn't know about it.
Use $http like this http://jsfiddle.net/4Y9L3/5/.

Categories