We Keep Coding

How do i pass API data to my content manager field on with wix fetch

i am getting some data from https://www.griffati.com/restful/export/api/products.json. It's a dropping website, i want to fetch products from the API to my website.
I have made the API call, and i was successful in fetching it, i created a Database on the backend, the name of the database is Products with fields (title, name, price, image).
The issue i'm having is how to pass the data from the API to the database. I tried somethings but clearly it's not working
import { fetch } from 'wix-fetch';
import wixData from 'wix-data';
export async function getProduct() {
const url = "https://www.griffati.com/restful/export/api/products.json";
return fetch(url, {
"method": "get",
headers: {
"Content-Type": "application/json",
"Authorization": "Basic ********************************"
}
}).then((data) => {
if (data.ok) {
return data.json();
} else {
// return Promise.reject("Fetch failed")
return data
}
}).then(data => {
data.pageItems.forEach(item => {
const info = {
name: item.name,
price: item.price,
title: item.name
}
wixData.insert('Products', info)
// console.log(item.name)
})
})
}
Thanks

VueJS submit are delayed resulting in wrong data

I have a method in my Vue Instance which updates and removes a value from my database. When the method is submitted the values are updated correctly, but I need to do a refresh before the values are removed from the frontend. Below are my method:
async winBet(id, amount, bet) {
try {
this.bet.id = id
this.bet.amount = amount
this.bet.bet = bet
await this.$http.post("/user/winBet", this.bet);
} catch (err) {
console.log(err)
}
},
<form #submit="winBet(value._id, value.amount, value.bet)">
<button type="submit">Won</button>
</form>
I render the list, which after the submit should be not contain the submitted element, the following way
<ul v-for="value in pendingBets">
<li>Bet: {{value}}</li>
</ul>
________________________________________________________________
mounted() {
fetch('http://localhost:4000/user/getUser', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
'email': this.myval.email
}),
})
.then(function (response) {
return response.json();
}).then(function (data) {
this.pendingBets = data[0].allBets
}.bind(this));
}
For some reason I need to do a refresh before the value is removed from "pendingBets". Sometimes it works and sometimes I have to do the refresh. I'm still new to Vue so hope someone can ping me in the right direction here. Thank you in advance.

Re-hit the api as soon as you hit submit, I have defined a generic function called getData inside the methods which is being reused
methods: {
async winBet(id, amount, bet) {
try {
this.bet.id = id
this.bet.amount = amount
this.bet.bet = bet
await this.$http.post("/user/winBet", this.bet);
await this.getData();
} catch (err) {
console.log(err)
}
},
async getData() {
await fetch('http://localhost:4000/user/getUser', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
'email': this.myval.email
}),
})
.then(function (response) {
return response.json();
}).then(function (data) {
this.pendingBets = data[0].allBets
}.bind(this));
}
}
and your
mounted() {
this.getData();
}

The solution I came up with was to implement a window.location.reload() with a short setInterval.

How do I post JSON data into deeper layers within my API?

This week I have learned to fetch data from an API with javascript and jQuery.
Until now, I've only had to fetch from deeper levels within objects (which I've succeeded at), but I still don't know how to post to specific elements within other objects.
I'm currently working on a smart home project, where I'm the one responsible for the web application.
All device controllers have got a 'favourite' button, which is the one that triggers this function to either favourise or un-favourise the pressed object:
function toggle_favourite(id) {
fetch('../../api/objects?id=' + id)
.then(response => response.json())
.then(data => {
if (data.objects[id-1].favourite == true) {
// set .favourite to 'false'
put(id, {
favourite: false
})
} else {
// set .favourite to 'true'
put(id, {
favourite: true
})
}
})
})
}
function put(id, data) {
fetch('../../api/objects?id='+id, {
method: 'PUT',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data),
})
}
The data that I'm trying to change is this favourite value.
How do I manouver over to this 'favourite' value with fech/'PUT'?

If the value isn't top level, you have to fetch the entire object, change the part you want to and then 'PUT'/'POST' the object at the end.
For this example, I fetched the entire object and saved it into a 'const', went through it and changed the 'favourite' value, and at the end I 'PUT' everything back into the object like so:
async function getObject(id){
const response = await fetch('../../api/objects?id='+id)
return response.json()
}
async function saveObject(){
const data = await getObject(int_id)
$.each(data, function(index, objects){
$.each(objects, function(index, values){
if (values.favourite == true ){
values.favourite = false
}
else{
values.favourite = true
}
})
})
put(int_id, data)
function put(id, data) {
fetch('../../api/objects?id='+id, {
method: 'PUT',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data),
})
.then(response => response.json())
.then(data => {
console.log('Success:', data);
})
.catch((error) => {
console.error('Error:', error);
})
}
}

React and Node Login implementation

I have an application in which i need to make auths
i made the exact replica of react-routers auth workflow(https://reacttraining.com/react-router/web/example/auth-workflow)
Auth.js
const auth = {
isAuthenticated: false,
authenticate(data, scb, fcb) {
fetch("/api/login", {
method: "POST",
headers: {
"Content-Type": "application/json; charset=utf-8"
},
body: JSON.stringify(data)
})
.then(res => res.json())
.then(res => {
console.log(res);
localStorage.setItem("token", res.token);
this.isAuthenticated = true;
scb();
})
.catch(ex => {
this.isAuthenticated = false;
fcb();
});
},
signout(cb) {
localStorage.removeItem("token");
this.isAuthenticated = false;
cb();
},
checkSignIn(cb, fcb) {
fetch("api/user/me", {
headers: {
"content-type": "application/json",
"x-auth-token": localStorage.token
}
})
.then(res => res.json())
.then(res => {
console.log("here");
this.isAuthenticated = true;
cb();
})
.catch(err => {
console.log("here in checksign in catch");
this.isAuthenticated = false;
fcb();
});
}
};
export default auth;
Now while when the page loads i use checkSignIn method and redirect the user to dashboard if the user is authenticated
The main problem is if the token expires , my API call will be rejected , now i want to redirect the user back to Login , I use the signout method and pass the callback to change the state of the component and return but the problem is I am seeing too much repetition in the code , at every api call i have to pass a callback to change the state of the page if the api call fails or i have to use withRouter (HOC) but i have to wrap my every component in that.
Is there any alternative way to implement this functionality

Generic dataloader for redux-thunk using axios

I am developing an application where there are lots of async actions. I wanted to go with redux-saga but most have insisted to continue with redux-thunk. In redux-thunk, inside each action we have to work with async operation using then, dispatch, catch, etc. This makes looks actions so messy and lots of code will be repeated. I wanted to create a generic dataLoader for the use of redux-thunk and axios but could not consider for both post(might be token or not) and get option.
Here is my attempt:
export class Company {
/**
* Generic api data loader
*/
static dataLoader(apiUri, onSuccess, onError, data, ...actionArguments) {
const requestURL = `${API_BASE}${apiuri}`;
try {
let options;
if (data !== undefined) {
// if we have data to post
options = {
method: 'POST',
url: requestURL,
body: JSON.stringify(data),
headers: {
'Content-Type': 'application/json',
'X-Requested-With': 'XMLHttpRequest',
},
};
}
}
return function(dispatch) {
axios(options)
.then(response => {
dispatch({
type: onSucess,
payload: response.data
});
})
.catch(error => {
dispatch({ type: onError, payload: err});
});
}
}
static get(apiUri, onSuccess, onError, ...actionArguments) {
return this.dataLoader(apiUri, onSuccess, onError, undefined, ...actionArguments);
}
/*
* Shorthand POST function
*/
static post(apiUri, onSuccess, onError, data, ...actionArguments) {
return this.dataLoader(apiUri, onSuccess, onError, data, ...actionArguments);
}
}
I want to convert the following code to further this one:
export function showResultofApartment() {
return (dispatch) => {
dispatch({ type: 'APARTMENT_FETCH_START' });
const token = localStorage.getItem('token');
return axios.get(`${API_URL}/newoffers/apartment/`)
.then((response) => {
console.log('response apart', response.data);
dispatch({ type: 'APARTMENT_FETCH_SUCCESS', payload: response.data });
})
.catch((err) => {
dispatch({ type: 'APARTMENT_FETCH_FAILURE', payload: err });
});
};
}
to such or more efficient than this:
export function showResultofApartment() {
return(dispatch) => {
dispatch({ type: APARTMENT_FETCH_START });
const token = localStorage.getItem('token');
return Company.get('/apartments', APARTMENT_FETCH_SUCCESS, APARTMENT_FETCH_ERROR);
// if post then Company.post('/apartment', APARTMENT_POST_SUCCESS, APARTMENT_POST_ERROR, data)
}
}
This way it is considering only post request(if data !== undefined). How should i handle for both get and post efficiently?

Okay, why don't you handle it like this:
Company.js
import { merge } from 'lodash';
import axios from 'axios';
function getHeaders() {
return {
'Content-Type': 'application/json'
};
}
export class Company {
static callAPI(endpoint, extendedOptions, onSuccess, onError) {
const initalHttpData = {
method: 'GET', // By default it's GET in case you didnt specify anything
headers: getHeaders(),
url: `${API_BASE}${endpoint}`
};
// merge takes care of replacing or adding the specific key's provided via the extendedOptions
const options = merge(initalHttpData, extendedOptions);
// Fire the request for the prepared options.
let request = axios(options);
// The request once fired, needs it's success handler and error handler.
return function(dispatch) {
request
.then(response => {
dispatch({
type: onSucess,
payload: response.data
});
})
.catch(error => {
dispatch({ type: onError, payload: err});
});
}
};
}
Then we can use actions to specifically pass things to this api util:
GET API call:
// GET Action
export function showResultofApartment() {
return (dispatch) => {
dispatch({ type: APARTMENT_FETCH_START });
const token = localStorage.getItem('token');
// FOR GET API
return Company.callApi('/apartments', {}, APARTMENT_FETCH_SUCCESS, APARTMENT_FETCH_ERROR);
}
}
POST API call:
// POST Action
export function showResultOfAppartmentPost() {
return (dispatch) => {
dispatch({ type: APARTMENT_FETCH_START });
const token = localStorage.getItem('token');
// This will merge, essentially replace the method=GET once it gets called.
const extendedOptions = {
method: 'POST',
body: JSON.stringify(data),
headers: {
'X-Requested-With': 'XMLHttpRequest',
}
}
// FOR GET API
return Company.callApi('/apartments', extendedOptions, APARTMENT_FETCH_SUCCESS, APARTMENT_FETCH_ERROR);
}
Thus, giving the action, to define it's own set of API body or requests.