I'm using express js to send data from mysql. I send it using res.json(theData).
In the client side I get it like this in the console:
{
"data":[
{
"PlazaID":1,
"PlazaName":"fff",
"PlazaAddress":"fff",
"PlazaContactNo":"45645",
"PlazaLanes":"34",
"PlazaStatus":"y",
"ClientID":1
},
{
"PlazaID":2,
"PlazaName":"plaza2",
"PlazaAddress":"p2",
"PlazaContactNo":"000",
"PlazaLanes":"2",
"PlazaStatus":"a",
"ClientID":2
}
],
"status":200,
"config":{
"method":"GET",
"transformRequest":[
null
],
"transformResponse":[
null
],
"url":"/getTollPlaza",
"headers":{
"Accept":"application/json, text/plain, */*"
}
},
"statusText":"OK"
}
I store these values in an array to populate a table using angularjs' ng-repeat like this:
for(i=0;i<response.data.length;i++){
tableArray.push({
plazaid:response.data[i].plazaid,
plazaname:response.data[i].plazaname,
plazaaddress:response.data[i].plazaaddress,
plazacontactnumber:response.data[i].plazacontactnumber,
plazalane:response.data[i].plazalane,
plazastatus:response.data[i].plazastatus,
clientid:response.data[i].clientid
});
}
When I console.log the array the values are undefined.
0: Object
clientid:undefined
plazaaddress:undefined
plazacontactnumber:undefined
plazaid:undefined
plazalane:undefined
plazaname:undefined
plazastatus:undefined
Try this. Please note that variable name are case sensitive.
for(i=0;i<response.data.length;i++){
tableArray.push({
plazaid:response.data[i].PlazaID,
plazaname:response.data[i].PlazaName,
plazaaddress:response.data[i].PlazaAddress,
plazacontactnumber:response.data[i].PlazaContactNo,
plazalane:response.data[i].PlazaLanes,
plazastatus:response.data[i].PlazaStatus,
clientid:response.data[i].ClientID
});
}
Related
I'm new in react-admin and I'm trying to create a new admin panel for my old API.
So when my data provider do API calls it causes me this error:
The response to 'getList' must be like { data : [...] }, but the received data is not an array. The dataProvider is probably wrong for 'getList'
The responses of my old API has various data fields like { 'posts': [] } or { 'users': [] }. How can I use these name of fields instead of { 'data': [] } ?
The 'data' in this case just refers to the type of information that should be retuned, not the name of the object.
Within your API, you can simply return a list in the following form:
const posts = [
{
"id":1,
"name":"post1"
},
{
"id":2,
"name":"post2"
},
];
return JSON.stringify(posts);
Then return that 'posts' object in your response and don't forget to set the expected ContentRange headers.
Not sure what language you are using, but the principle above should be easy enough to follow and apply in any language.
I am having an issue passing through an array through axios post call. The issue is that on the api endpoint the data received is null, when I try posting using postman it works fine so the endpoint is working. Example of the array
I need to pass the data in this format:
{
"UpdateItemList": [
{
"Text": 1,
"Value": "5"
},
{
"Text": 1,
"Value": "5"
}
]
}
Code:
export function createLogEntry(postData) {
let payload = {
UpdateItemList: postData
};
const request = axios.post('https://localhost:44312/api/Audit/AddLogEntry', {
data: payload
});
return {
type: CREATE_LOG,
payload: request
}
}
Is there any issue with the way I am passing through the data with my current code?
Try with
const request = axios.post('https://localhost:44312/api/Audit/AddLogEntry',payload);
This worked for me!
The issue is that you are confusing two ways axios can be used. Currently you are actually posting your data nested in an object within and the key data:
{
data: {
UpdateItemList: postData
}
}
If you are using the axios.post function, you should just pass your object with the data to post as the second object like this:
const request = axios.post('https://localhost:44312/api/Audit/AddLogEntry', payload);
If you are using the config object method, you should just pass one single object with url, method and data as keys.
// Send a POST request
axios({
method: 'post',
url: 'https://localhost:44312/api/Audit/AddLogEntry',
data: payload
});
This behaviour is explained in the axios Readme here: https://github.com/axios/axios#axios-api
how do I display an image whose path is in a json fake server? Data in json file looks like:
"packages": [
{
...
"images": [
"https://i.ibb.co/g7FWSYv/a.jpg",
"https://i.ibb.co/hX3xQ5K/b.jpg",
"https://i.ibb.co/68TdBNs/c.jpg"
],
...
},
]
I am using a v-for loop to display data
<v-col v-for="(package, index) in packages" :key="index">
<v-img :src="package.images[0]" ></v-img>
</v-col>
Here is my javascript:
import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)
export default {
data () {
return {
packages: [],
}
},
created () {
this.initialize()
},
methods: {
initialize () {
axios.get('http://localhost:4000/packages', {})
.then(response => {
this.packages = response.data
})
}
}
}
But the image is not getting displayed. I am getting an error in the console:
TypeError: Cannot read property '0' of undefined
response.data is correct. It is showing the images array with 3 elements.
Can anyone help me?
I have changed my json slightly:
"images": [
{ "src": "https://i.ibb.co/g7FWSYv/a.jpg"},
{ "src": "https://i.ibb.co/hX3xQ5K/b.jpg" },
{ "src": "https://i.ibb.co/68TdBNs/c.jpg"}
],
and changed the code as:
<v-img :src="package.images[0].src"></v-img>
Still I am getting the same error in console.log()
it depends on the data structure of response.data if it's an array of objects that contains images field as an array of images links, then your code should work.
if response.data is a single object (which I presume) that contains images array then TypeError: Cannot read property '0' of undefined will be rised, in this case you don't need a loop to show your 0 indexed images, just
<v-img v-if="packages.images" :src="packages.images[0]" ></v-img>
I'm trying to post to my Laravel backend some data as 'offer' array:
That is how it looks in postman and works:
keys: offer[title], offer[description], offer[author_user_id]
now with axios I've tried something like:
offer: {
title: this.input.title,
description: this.input.description,
author_user_id: id,
}
tried also with:
[key=>val] and for example offer.title: value, but also failed.
How it should looks like?
EDIT:
this.axios.post('http://api.wip/api/offer/store', {
offer: {
title: this.input.title,
description: this.input.description,
author_user_id: id,
},
category: 2
}, {
headers: {
'Authorization': 'Bearer ' + token,
'Content-Type': 'application/x-www-form-urlencoded',
'X-Requested-With': 'application/json'
}
})
.then(function () {
})
.catch(function () {
});
In my console I can see it's sent as:
{"offer":{"title":"asd","description":"asd","author_user_id":"2"},"category":2}:
I recive 500 error from server with response from Laravel that it expects data to be array.
"message": "Argument 1 passed to Illuminate\\Database\\Eloquent\\Builder::create() must be of the type array, null given, called in D:\\wamp64\\www\\apitest\\vendor\\laravel\\framework\\src\\Illuminate\\Support\\Traits\\ForwardsCalls.php on line 23",
As I said it works with postman, but can't make this works from axios
Laravel controller:
public function store(Request $request) {
$offer = Offer::create($request->input('offer'));
$offer->category()->sync($request->input('category'));
$offer->save();
return response()->json($offer);
}
Boussadjra Brahim is right the issue is in the backend But its caused by sending null values from the frontend so we have to take a look at frontend.
first thing is using {} meaning u are creating object , [] is array and laravel create method accept array only
the input is an array itself as u are accessing it keys with (dot) so why not just set offer to the whole array and then separate them in the backend ? like this
axios.post('http://api.wip/api/offer/store', {
offer:this.input,
author_user_id: id,
category: 2
},
in your backend u can access them like :
$title = $request->offer['title'];
one last thing, when u are using create method the keys must be the same name as the column name in database or it will throw error!
hope it helps
I'm currently working on a RESTful API backend using nodejs with typescript where I need to gather information from multiple different APIs and parse the result and pass on the parsed information to the frontend.
Right now I'm working on a API route where I gather information from two different external API routes, I gather the data from there with https. I send the data onward to my Objecthandler in the form [object Object],[object Object] because I push the response from my first http call into an array and my second http response into another array which I then push onto a third array that is the combined data from both responses.
const first: object [] = [
];
const second: object [] = [
];
const combined: object [] = [
];
My object handler code looks like this:
function ObjectHandlerAvainsanat(obj: any): object[] {
const keywords: object [] = [
];
if (obj instanceof Array) {
obj.forEach((e: any) => {
const results = e.results.map((x: any) => x);
const vals = {
localname: results.localname,
prefLabel: results.prefLabel,
altLabel: results.altLabel,
};
keywords.push(vals);
});
return keywords;
}
}
However, I get the error that
const results = e.results.map((x) => x);
^
TypeError: Cannot read property 'map' of undefined
The actual data inside the http response looks like this, where I want the values from inside the results object array:
{
"#context": {
"skos": "http://www.w3.org/2004/02/skos/core#",
"isothes": "http://purl.org/iso25964/skos-thes#",
"onki": "http://schema.onki.fi/onki#",
"uri": "#id",
"type": "#type",
"results": {
"#id": "onki:results",
"#container": "#list"
},
"prefLabel": "skos:prefLabel",
"altLabel": "skos:altLabel",
"hiddenLabel": "skos:hiddenLabel",
"#language": "FI"
},
"uri": "",
"results": [
{
"uri": "http://www.yso.fi/onto/yso/p22020",
"type": [
"skos:Concept",
"http://www.yso.fi/onto/yso-meta/Concept"
],
"localname": "p22020",
"prefLabel": "pyydystä ja päästä -kalastus",
"lang": "fi",
"altLabel": "catch and release -kalastus",
"vocab": "yso"
},
{
"uri": "http://www.yso.fi/onto/yso/p22337",
"type": [
"skos:Concept",
"http://www.yso.fi/onto/yso-meta/Concept"
],
"localname": "p22337",
"prefLabel": "CATCH-22",
"lang": "fi",
"vocab": "yso"
}
Does anyone here know what I'm doing wrong? Thanks in advance for all the help,
Br,
Victor
TypeError: Cannot read property 'map' of undefined
e.results is undefined. This is a fact irrespective of your result object you are showing.
Fix
console.log(e) and go from there.
(assuming e is your http response)
Based on the HTTP response you provided, e is a JSON object, so you can call:
let newVar = JSON.parse(e);
and then try to pull results using:
newVar.results.map((x: any) => x);
Hope this helps...