How to fix 'TypeError: Cannot read property 'items' of undefined' - database

I am trying to display a reference field from my database as a result on my filtered repeater. I am unsure of how to code the page correctly for this to happen.
When testing my code, this is what shows in the developer console:
Loading the code for the SEARCH WITH VIN page. To debug this code, open i5zkm.js in Developer Tools.
Url: https://vpic.nhtsa.dot.gov/api/vehicles/decodevin/19UUA96299A543965/?format=jsonVINModule.jsw
Line 5{...}
SEARCH WITH VIN
Line 14{...}
VINModule.jsw
Line 12
Dataset is now filtered
SEARCH WITH VIN
Line 22
TypeError: Cannot read property 'items' of undefined
import {getVINInfo} from 'backend/VINModule';
import {wixData} from 'wix-data';
$w.onReady(function () {
//TO DO: Write Your Page Related Code Here:
});
export function button1_click(event, $w) {
//Add your code for this event here:
getVINInfo($w("#vininput").value)
.then(VINInfo => {
console.log(VINInfo)
$w("#results").text = VINInfo.Results[8].Value + " " + VINInfo.Results[5].Value + " " + VINInfo.Results[7].Value;
$w("#dataset1").setFilter(wixData.filter()
.eq("year", VINInfo.Results[8].Value)
.eq("make", VINInfo.Results[5].Value)
.eq("year", VINInfo.Results[7].Value))
.then((results) =>{
console.log("Dataset is now filtered");
$w("#repeater1").data = results.items;
let items = "title"
})
.catch((err) => {
console.log(err);
});
$w("#repeater1").expand();
})
}
I expect the repeater to show the title field from my database but nothing happens to the elements in the repeater and I receive the following in my developer console when previewing the page: TypeError: Cannot read property 'items' of undefined.

dataset setFilter() returns a promise with a void value, so you can't just access the dataset items from that returned promise.
If the repeater isn't already bound to the dataset, you should use getItems():
$w("#myDataset").getItems()
.then( (result) => {
$w("#repeater1").data = results.items
})

Related

Adding data to DB using an Axios request yields Internal Server Error

I'm creating a form using Vue JS (more specifically the Vuetify library) and when clicking the 'Add' button I am trying to make it so that the user input is added to the database.
The database has 3 columns: id, type_id, value. I want to link the user input to the value column.
Note that allDesserts is an array that stores all of the items in the database. This is what I want to add to.
How can I achieve this?
Component in my form:
<v-combobox
:items="allDesserts.map(a => a.value)"
label="Project Type"
:search-input.sync="search"
>
<template v-slot:no-data>
<v-text-field
label="Add new dessert"
v-model="search"
>
</v-text-field>
<v-btn
#click="enterKey"
>Add</v-btn>
</template>
</v-combobox>
Axios request/method:
enterKey () {
axios.post('/api/desserts', {
value: 'key'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error.response);
});
}
My controller:
public function storeDessert(Request $request)
{
$dropdownType = new DropdownType();
$dropdownType->attribute_id = $request->input(rand(1, 10000));
$dropdownType->value = $request->input('value');
$dropdownType->save();
}
I am getting the following error:
"Illegal string offset 'id'"
I think your error is on this line.
$dropdownType->attribute_id = $request->input(rand(1, 10000));
Let say rand(1, 10000) will give you a value of 100, now you used this 100, as a key to access value in your requests which is not available.
Try to look your payload. You are just passing a data which has a key value only, this one.
{value: 'key'}
and now this line will work cause it is available in your payload.
$dropdownType->value = $request->input('value');
But not this one.
$dropdownType->attribute_id = $request->input(rand(1, 10000));

Iterating over array created from subscribe function of Observable

I have this code that gets some data from a MongoDB and saves it in an array in my component.
this.laugService.getAllLaug().subscribe(laug => {
this.laugs = laug; //save posts in array
});
this.laugs.array.forEach(element => {
this.modelLaugs.push(new Laug(element.navn, element.beskrivelse))
});
After that i want to save this data to a different array, where i create new instances of my model "Laug". For this i am using a foreach loop, however i am getting an error when running this code:
ERROR Error: Uncaught (in promise): TypeError: Cannot read property
'forEach' of undefined
TypeError: Cannot read property 'forEach' of undefined
I am certain that i receive the data from the DB, however i am unsure why my array is undefined at this point.
Your subscription is asynchronous. The laugs property may not be set when you are trying to iterate. Just put the forEach code inside the subscribe callback:
this.laugService.getAllLaug().subscribe(laug => {
this.laugs = laug; //save posts in array
if (this.laugs && this.laugs.array) {
this.laugs.array.forEach(element => {
this.modelLaugs.push(new Laug(element.navn, element.beskrivelse))
});
}
});

Filter pouchdb docs on the list by ID from another doc - two promises in sequence

I've got two types of docs in pouchdb:
todos - list of todos
user - just user number put in pochdb by separate form
When I write todos I also have variable for userNo. This way I know which todos he owns.
I've got two functions in provider to get todos, and user number.
In html list I want to filter todos by user number through pipe:
<ion-item-sliding *ngFor="let todo of todos | filter : 'numer_p' : this.todoService.userNo">
If I enter this number by hand it works great. Todos are filtered by this number.
The problem is that I have two calls in home.ts ionViewLoaded:
//call provider to get all docs to show on the list
this.todoService.getTodos().then((data) => {
this.todos = data;
});
//call provider to get userNo from pouchdb and set variable in the provider
this.todoService.getUser().then((result) => {
console.log("getBadacz result:" + JSON.stringify(result));
this.todoService.userNo = result['name'];
}).then(function(second){;
console.log("second");
});
I need to call getTodos AFTER getUser. So I need to run this functions in sequence using Promises.
Without it this.todoService.userNo in filter is undefined, because it is not set yet. And it will not work.
I tried to do it like this:
this.todoService.getUser().then((result) => {
console.log("getBadacz result:" + JSON.stringify(result));
this.todoService.userNo = result['name'];
}).then(function(second){;
console.log("second");
this.todoService.getTodos().then((data) => {
this.todos = data;
});
});
But there is an error:
EXCEPTION: Error: Uncaught (in promise): TypeError: Cannot read property 'todoService' of null
I tried to arrange this promises in sequence but without success.
Here is fiddle where you can find implementation of functions in provider:
Filter pouchdb docs by userID saved in another doc
Thank you very much for your help.
In situation like this, I would try to include userId in the todo key, that would increase performance (a todos document may have key like this userId_todoId).
So you will not need two promises at all.

React SoundCloud API fetch items

I trying to fetch the data and show the list of items
http://jsbin.com/puwigosoro/1/edit?js,console,output
I see the response, but nothing changes on the screen, what I doing wrong?
BTW, how can I debug what exists in state? console.log(this.state) shows nothing.
Added:
I found the problem but still didn't found the solution, this unknown inside callback of SC.get()
SC.get('/tracks', {
q: query
// license: 'cc-by-sa'
}).then(function(tracks) {
//console.log('this.state: ' + JSON.stringify(this.state));
this.setState({search_results:tracks}); // THIS UNKNOWN HERE
});
OK, I found the solution, inner this of callback is overwrites our this so we just need to pass it to other variable:
_fetchResults(query){
var that = this; // <<<<<<<<<<< THIS LINE
SC.get('/tracks', {
q: query
// license: 'cc-by-sa'
}).then(function(search_results) {
that.setState({search_results}, function () {
console.log('callback of setState()');
});
});
}

How to add empty rows when id is zero using angularjs

I am adding empty rows to table passing id which is retrieving from database which is working but when i tried to add empty rows when id is zero then
TypeError: Cannot call method 'push' of null
I dnt understand the issue where it is arising my add function in controller is
$scope.addMachineItems = function (id) {
ServiceFactory.InvokeWithParameters(baseurl + 'Api/AdminApi/AddRow?machineID=' + id).success(function (success) {
$scope.machine.machineItemList.push(success);
}).error(function (error) {
alert(error);
})
}
In my view i used click like this
<td ng-click="addMachineItems(machine.machine_ID)">
<a >Add+ </a>
</td>
ng-repeat="machine in machine.machineItemList"
API Controller code
public MachineTypeItems AddRow(int machineID)
{
MachineTypeItems item = new MachineTypeItems();
item.Isactive = 1;
item.Machine_ID = machineID;
return item;
}
can anyone one explain why type error issue is coming and why can't i add empty rows while passing id = 0.
I hope I gave an clear explanation.
Some source code is missing here.
The problem is not about type error, the problem is that $scope.listinfo is not instantiated when id=0.

Resources