I'm using this standard code from the tutorial examples:
agGrid
.simpleHttpRequest({
url: 'https://www.ag-grid.com/example-assets/olympic-winners.json',
})
.then(function (data) {
gridOptions.api.setRowData(data);
});
But the JSON data I want to use is returned as an Object, not an array.
Like this:
{
"response": [
{"athlete":"Michael Phelps","age":23,"country":"United States","year":2008,"date":"24/08/2008","sport":"Swimming","gold":8,"silver":0,"bronze":0,"total":8},
{"athlete":"Michael Phelps","age":19,"country":"United States","year":2004,"date":"29/08/2004","sport":"Swimming","gold":6,"silver":0,"bronze":2,"total":8}
]
}
Their example files are arrays and start with a [
I can't seem to find any setRowData documentation to see if there's a way around this.
Any ideas?
thx
you'll get the array from data replacing data with data.response :
agGrid
.simpleHttpRequest({
url: 'https://www.ag-grid.com/example-assets/olympic-winners.json',
})
.then(function (data) {
gridOptions.api.setRowData(data.response);
});
Best !
Related
I am using Axios to load a static JSON from the React application server, and upon reading the files, there are many key/value pairs missing.
The JSON file in question is asset-manifest.json, which includes all the assets (media, css, js) files in the app, and is generated in the build process by webpack. I use this file as reference to pre-load the images for the website.
The JSON file looks like this (ellipsis added by me, ofc):
{
"files": {
"main.js": "/static/js/main.04cbf801.chunk.js",
"main.js.map": "/static/js/main.04cbf801.chunk.js.map",
"runtime-main.js": "/static/js/runtime-main.ed6fc4d3.js",
"runtime-main.js.map": "/static/js/runtime-main.ed6fc4d3.js.map",
"static/css/2.f5a05697.chunk.css": "/static/css/2.f5a05697.chunk.css",
"static/js/2.448c4959.chunk.js": "/static/js/2.448c4959.chunk.js",
"static/js/2.448c4959.chunk.js.map": "/static/js/2.448c4959.chunk.js.map",
"static/css/3.d7d661be.chunk.css": "/static/css/3.d7d661be.chunk.css",
"static/js/3.1605bce2.chunk.js": "/static/js/3.1605bce2.chunk.js",
"static/js/3.1605bce2.chunk.js.map": "/static/js/3.1605bce2.chunk.js.map",
"index.html": "/index.html",
"precache-manifest.093a3239b1d438e30c3887d109b2e7b2.js": "/precache-manifest.093a3239b1d438e30c3887d109b2e7b2.js",
"service-worker.js": "/service-worker.js",
"static/css/2.f5a05697.chunk.css.map": "/static/css/2.f5a05697.chunk.css.map",
"static/css/3.d7d661be.chunk.css.map": "/static/css/3.d7d661be.chunk.css.map",
"static/media/ANKLES.6d795be0.svg": "/static/media/ANKLES.6d795be0.svg",
"static/media/ARMS.8418bd6e.svg": "/static/media/ARMS.8418bd6e.svg",
(...)
},
(...)
}
And there is nothing extraordinary in the key/value pairs that are missing. In total, these are about 15 missing entries, from a total of more than 400. For example, these are some of the key/value pairs missing:
"static/media/testa.png": "/static/media/testa.0b92a7e4.png",
"static/media/Osso01.png": "/static/media/Osso01.9949a55e.png",
"static/media/CabeloHomem01.png": "/static/media/CabeloHomem01.258b6c19.png"
This is the code I am using to load the JSON:
axios.get("asset-manifest.json")
.then(manifest => {
// entries in manifest are already missing at this point
// do stuff with manifest
})
I tried using fetch instead of Axios, for the same result.
BTW, if I copy the JSON code and parse it in the console/terminal, all entries are parsed as expected.
As a workaround, I can embed the related images in the code using base 64, but that's a last resort that I'd prefer to avoid.
Any ideas?
Thanks for reading.
is working fine with fetch first check your response in the postman or any other that you like
let payload = {
token: 'p1ztA-3ZEYrX2wJAa_juSg',
data: {
'static/media/testa.png': '/static/media/testa.0b92a7e4.png',
'static/media/Osso01.png': '/static/media/Osso01.9949a55e.png',
'static/media/CabeloHomem01.png':
'/static/media/CabeloHomem01.258b6c19.png',
'main.js': '/static/js/main.04cbf801.chunk.js',
'main.js.map': '/static/js/main.04cbf801.chunk.js.map',
'runtime-main.js': '/static/js/runtime-main.ed6fc4d3.js',
'runtime-main.js.map': '/static/js/runtime-main.ed6fc4d3.js.map',
'static/css/2.f5a05697.chunk.css': '/static/css/2.f5a05697.chunk.css',
'static/js/2.448c4959.chunk.js': '/static/js/2.448c4959.chunk.js',
'static/js/2.448c4959.chunk.js.map': '/static/js/2.448c4959.chunk.js.map',
'static/css/3.d7d661be.chunk.css': '/static/css/3.d7d661be.chunk.css',
'static/js/3.1605bce2.chunk.js': '/static/js/3.1605bce2.chunk.js',
'static/js/3.1605bce2.chunk.js.map': '/static/js/3.1605bce2.chunk.js.map',
'index.html': '/index.html',
'precache-manifest.093a3239b1d438e30c3887d109b2e7b2.js':
'/precache-manifest.093a3239b1d438e30c3887d109b2e7b2.js',
'service-worker.js': '/service-worker.js',
'static/css/2.f5a05697.chunk.css.map':
'/static/css/2.f5a05697.chunk.css.map',
'static/css/3.d7d661be.chunk.css.map':
'/static/css/3.d7d661be.chunk.css.map',
'static/media/ANKLES.6d795be0.svg': '/static/media/ANKLES.6d795be0.svg',
'static/media/ARMS.8418bd6e.svg': '/static/media/ARMS.8418bd6e.svg',
},
};
fetch('https://app.fakejson.com/q', {
method: 'POST',
body: JSON.stringify(payload),
headers: {
'Content-type': 'application/json; charset=UTF-8',
},
})
.then(response => response.json())
.then(json => console.log(json));
hello everyone i want to render the json response returned from server for that i'm using map method. But there is a mistake in my code please help me to figure it..The response i'm getting is
response.json
{
status: true
token:{
access_token: "BhTErqRtliUG#8"
client_id: "ck4fLr08YHkW2y"
expires: "2018-02-19 03:51:50"
scope: null
user_id:465
},
user:{
avatar: "https://www.indianeconomy.net/lms/wp-content/uploads/2017/11/favicon.png"
email: "tet#wehubs.afs"
id:465
name: "testere"
sub:""
}
}
I've tried this
fetch(''{
.... }).then((responseData)=>{
this.setState({
userdetail: responseData,
loaded:true,
})
}
render(){
return this.state.userdetail.map(user=>{
<Text>{token.access_token}</Text>
})
}
How to use map method over above json response?
The other comments are correct. You cannot map over an object like this. There are ways you can iterate over object properties:
for(let prop in object) {
console.log(object[prop]);
}
However, in your example the objects don't have any similarities so you would not get any benefit from iterating over them.
If instead, you wanted to display the access token, you would do the following:
return (
<Text>{this.state.userdetail.token.access_token}</Text>
);
json string shown by you is not a valid json you can validate here https://jsonlint.com/
i am not sure about react but you mention dict so in python if you have valid json
you can map it with dict like this
json.loads(json_string)
In the following code I am getting data from server and filling array with them:
Vue.http.post('/dbdata', DataBody).then((response) => {
App.$refs.userContent.rasters_previews_list.$set(response); // putting JSON answer to Component data in userContent
console.log("App.$refs.userContent.rasters_previews_list: ", App.$refs.userContent.rasters_previews_list.length);
}, (response) => {
console.log("Error")
});
Now I am filling. data is declared in var userContent = Vue.extend({. I am using App.$refs.userContent.rasters_previews_list to set it's value, because one man from SO said that there is no other way to get access to constructor. I tried to do output of rasters_previews_list after changing with watch, but here is what I am see. http://img.ctrlv.in/img/16/08/04/57a326e39c1a4.png I really do not understand am I setting it's right way or no. If yes, why I do not see data and see only this crap?
data: function () {
return {
rasters_previews_list: []
}
}
But How I can iterate it with v-for?
<ul v-for="img in rasters_previews_list">
<li>{{img}}</li>
<ul>
This code is display one bullet. So it's look like it's assume that there is one object.
My object in browser console look like:
Object {request: Object, data: Array[10], status: 200, statusText: "OK", ok: true}
Your setting the full response instead of just the data you actually need.
Vue.http.post('/dbdata', DataBody).then((response) => {
App.$refs.userContent.rasters_previews_list.$set(response.data);
console.log("App.$refs.userContent.rasters_previews_list: ", App.$refs.userContent.rasters_previews_list.length);
}, (response) => {
console.log("Error")
});
If this isn't what you are looking for please post a full example.
I'm a newbie about Ajax but I'm trying to do this:
I've got a local Json file and I have to do some Ajax calls to read the Json file and insert the values in the HTML file. My Json file is:
{
"item": {
"name": "blabla",
"details": "blablablabla",
"composition": "blablablabla",
"modelDetails": [
"blablablabla",
"blablablabla",
"blablablabla"
],
"images": [
"http://...jpg",
"http://...jpg",
"http://...jpg",
"http://...jpg"
]
}
}
What is the best way to do this? I would like that pushing the button number one will call the first json file, with button two the second json file,...
Thank you
Edit:
The links are very usefull! Thank you!
Here's a nice example of ajax call to retreive JSON data from file and parse JSON data. Hope it helps :)
http://code.runnable.com/UhY_jE3QH-IlAAAP/how-to-parse-a-json-file-using-jquery
IF link doesnt work :) Then try this script
$(document).ready(function() {
//after button is clicked we download the data
$('.button').click(function(){
//start ajax request
$.ajax({
url: "data.json",
//force to handle it as text
dataType: "text",
success: function(data) {
//data downloaded so we call parseJSON function
//and pass downloaded data
var json = $.parseJSON(data);
//now json variable contains data in json format
//Now you can get your data like json.name, json.object
}
});
});
});
I am new to Backbones.js, and I was trying to get my JSON urls and parse them correctly.
This is my code:
window.Post = Backbone.Model.extend({
initialize: function(options) {
this.id = options.id;
},
url: function() {
return 'api/get_post/?post_type=movies&id=' + this.id;
},
parse : function(response) {
return response.posts;
},
});
window.Posts = Backbone.Collection.extend({
model: Post,
defaults: {
model: Post,
},
url: "api/get_recent_posts/?post_type=movies",
parse : function(response) {
return response.posts;
},
});
It seems that parsing for both overrides each other or something. when I remove the parse option from the Post class, I get a full response from the collection, but not from the model.
Are there any clear examples on how to set parsing for different son hierarchies? my JSON result have a status ok before it dives into the actual data.
I've never used bones.js but maybe these examples will help.
I think what you want to do is get rid of the parse() function in your collection. This assumes that since it is a Post collection, your data will come in as an array of Post JSON objects [{id:'1', 'sub':{data}},{id:'2', 'sub':{data}},{id:'3', 'sub':{data}}] or something like that.
If your Post model has sub-models or collections, your model parse() will then take the sub-object property name and do something with it.
// In Post Model definition
parse:function(response) {
if (response.sub) {
// create some model or collection etc.
}
}
You might have to pass an option parse:true when you do your collection fetch.
I posted something along these lines which might help you see how sub-models can be instantiated on fetch calls.
Backbone.js: Load multiple collections with one request
Cast/initialize submodels of a Backbone Model
I hope this helps.