We Keep Coding

How to read data from array after promise/observable call

I am not into javascript and angular, currently working on some UI task and has workable/little knowledge of javascript
what i want, base on a key field filter out the objects.
currently what code is doing, hitting a api, which is storing some result in an array. this array result are in object (promise object) i guess, and i need to set out a filter condition on this object base on some value.
but for me issue is, object does not have key same as response, it store. data like this
​Array(5) [ {…}, {…}, {…}, {…}, {…} ]
​
0: Object { _isScalar: false, source: {…}, operator: {…} }
​
1: Object { _isScalar: false, source: {…}, operator: {…} }
​
2: Object { _isScalar: false, source: {…}, operator: {…} }
​
3: Object { _isScalar: false, source: {…}, operator: {…} }
​
4: Object { _isScalar: false, source: {…}, operator: {…} }
​
length: 5
so even if i iterate through each object i cant find the key which is my filter criteria.
below is code related to this
getSomeThing(
name: string,
dcId: any
): Promise<any[]> {
const url = `<url>`;
return this.http.get(url, { headers: this.sharedService.getHeaders() })
.toPromise()
.then(response => this.getSomeThingOneByOne(name, dcId, response.json()))
.catch(error => this.sharedService.handleError(error));
}
private getSomeThingOneByOne(name, dcId, someIds): Promise<any> {
const someObservables = [];
someIds.forEach(some => someObservables.push(this.getsomethingObservable(name, dcid, some)));
return Observable.forkJoin(someObservables)
.toPromise()
.catch(error => this.sharedService.handleError(error));
}
getsomethingObservable(
name: string,
dcId: any,
someId: any
): Observable<any> {
const url = `<url>`;
return this.http.get(url, { headers: this.sharedService.getHeaders() })
.map((response: Response) => {
const vm = response.json();
return vm;
})
.catch((error: any) => Observable.throw(this.sharedService.handleError(error)));
}
note i have change the name of function and variable.,
now here, getsomeThing call an api which return a list of ids and pass it to getSomethingOneByOne as array ie [1,2,3,4,5] , and this function getSomethingOneByOne call getsomethingObservable to get the data related to that id.
what i want is once i recied the data i should check a certain value in it or in getsomethingObservable check the value it self for that key and filter out the result.
but due since i am not able to read the data in array someObservables in function getSomeThingOneByOne raw i cant add filter condition there.
need help here as it requires knowledge of promise, obserable, angular and typescript which i lack.

just solved this by taking reference from #sonusindhu suggestion and taking reference from here too.
i had made changes on getSomeThingOneByOne as below and it worked
private getSomeThingOneByOne(name, dcId, someIds): Promise<any> {
const someObservables = [];
someIds.forEach(some => someObservables.push(this.getsomethingObservable(name, dcid, some)));
return Observable.forkJoin(someObservables)
.toPromise()
.then(response => {
var data = response.filter(val=>val[<somekey>]!='<a certain value>');
return data;
})
.catch(error => this.sharedService.handleError(error));
}

ES6 change to fixed values in API request

How do I change the values of my object to use the fixed values as I have done with my console.log?
fetchData = () => {
axios.get(fullAPI).then(res => {
const apiResponse = res.data
apiResponse.forEach(employee => console.log('test', employee.value.toFixed(2)))
apiResponse.forEach(employee => employee.value.toFixed(2))
console.log('raw data', apiResponse)
this.setState({
employeeData: apiResponse,
})
})
}
test 4.41
test 5.00
test 6.16
test 0.79
raw data
(10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0: {name: "Animals", value: 4.41361634}
1: {name: "Environment", value: 5.004498622999998}

The error with your code is that you are just formatting the value number and returning it to forEach (that does nothing with this information).
You must modify the original object.
fetchData = () => {
axios.get(fullAPI).then(res => {
const apiResponse = res.data;
apiResponse.forEach(employee => {
employee.value = employee.value.toFixed(2); // Note we are attributing the fixed value to the value itself, modifying the object
});
console.log('raw data', apiResponse)
this.setState({
employeeData: apiResponse
})
})
}
Note that this works because JavaScript always use a reference for objects (like a pointer in C), so even without returning the object, you are changing it properties and it will reflect on the original array.
IMO is more readable for non experienced (and experienced as well) programmers using Array.map() instead, since it will make clear that you are modifying the object and updating the array:
fetchData = () => {
axios.get(fullAPI).then(res => {
const apiResponse = res.data;
apiResponse.map(employee => {
employee.value = employee.value.toFixed(2)
return employee;
});
console.log('raw data', apiResponse)
this.setState({
employeeData: apiResponse
})
})
}
Both codes will do the same, probably no performance differences, just different readability.

You need to set employee.value to the desired value. Additionally, I recommend not using the implicit return syntax and use braces for readability.
apiResponse.forEach(employee => {
employee.value = employee.value.toFixed(2);
});

UncaughtTypeError products.map is not a function

product.map is not a function, i've tried almost all the fix from the web still not working. also, i've tried to console.log(response.data) and it response success
react ver 7.0
constructor () {
super()
this.state = {
products: []
};
}
componentDidMount(){
axios.get('http://localhost:8000/api/v1/products/1')
.then(response => {
this.setState({ products: response.data });
})
.catch(function (error) {
console.log(error);
})
}
render(){
var { products } = this.state;
var merk = products.map(products => {products.merk} );
got error products.map is not a function at var merk=.....
thanks.
console.log:
{success: true, data: Array(1), message: "Phone retrieved Successfully.."}
data: Array(1)
0: {id_product: 1, merk: "Xiaomi ", tipe: "Mi Note 10", soc_nama: "Qualcomm", soc_tipe: "Snapdragon 855+", …}
length: 1
__proto__: Array(0)
message: "Phone retrieved Successfully.."
success: true
__proto__: Object

products.map is not a function, this mean products is not an array
In your API at componentDidMount, You have to access to the data that you return from server. You accessing to response.data, this mean you just access to the data of XMLHttpRequest, not data of your API.
Try to console.log(response.data), and see which one is the array data that you want to get from server

AWS DynamoDB parsing returned data

I am trying to use JS to query DynamoDB and parse the returned data. I must admit that I am new to JavaScript but I am having some weird behaviours.
In the following function I am passing an array of dates and I am retrieving objects from my table
var queryDynamo = function(dateArray){
console.log(dateArray)
for (var i = 0; i < dateArray.length; i++) {
var params = {
TableName : "myTable",
KeyConditionExpression: "#day = :st ",
ExpressionAttributeNames:{
"#day": "day"
},
ExpressionAttributeValues: {
':st': dateArray[i]
}
};
var resp = docClient.query(params, function(err, data) {
if (err) {
console.log("ERR:"+JSON.stringify(err, undefined, 2))
} else {
data.Items.forEach(function(element) {
console.log(element)
});
}
});
}
console.log(resp.response)
return;
}
--> The following is the output
constructor {request: constructor, data: null, error: null, retryCount: 0, redirectCount: 0, …}
data:
Count: 4
Items: (4) [{…}, {…}, {…}, {…}]
ScannedCount: 4
__proto__: Object
error: null
httpResponse: constructor {statusCode: 200, headers: {…}, body: Uint8Array(1134), streaming: false, stream: i, …}
maxRedirects: 10
maxRetries: 10
nextPage: ƒ (e)
redirectCount: 0
request: constructor {domain: undefined, service: t.c…r.t.constructor, operation: "query", params: {…}, httpRequest: constructor, …}
retryCount: 0
__proto__: Object
The query succeeds but the result is kind of weird.
resp.response correctly contains the data object but I cannot access it. It says that it's null while it clearly is not since it has 4 Items.
Any thoughts?

You are attempting to print the response data before it exists. Your console.log(resp.response) line is executing before the DynamoDB query has completed and its results have been unmarshalled. This is a common gotcha in asynchronous JavaScript.
One way to see the response data in the AWS.Request object is to wait for it, like this (though you would never typically do this in JavaScript):
var req = docClient.query(params, function(err, data) {
// as before: handle err, data
)};
setTimeout(function () {
console.log('Response data:', JSON.stringify(req.response.data));
}, 2000);
A more common pattern is to use the promise variants of the SDK methods, like this:
docClient.query(params).promise()
.then(data => doSomething(data))
.catch(err => logError(err));

spread operator (...) is creating extra fields in array in es6

I wanted to embed a new key/value pair in the respective indexed array of objects based on an onChange event.
However, it is done correctly but adding extra elements in the array.
Original array of objects:
0:{data: {…}}
1:{data: {…}}
2:{data: {…}}
3:{data: {…}}
4:{data: {…}}
Achieved result:
0:{data: {…}}
1:{data: {…}}
2:{data: {…}, origin: "UK"}
3:{data: {…}, origin: "UK"}
4:{data: {…}}
5:"UK"
6:"UK"
Intended result:
0:{data: {…}}
1:{data: {…}}
2:{data: {…}, origin: "UK"}
3:{data: {…}, origin: "UK"}
4:{data: {…}}
Below is my code doing it in a loop:
render: (rowData, indexes) => {
return (
<SelectField
id={`origin-${indexes.rowIndex}`}
defaultValue="US"
style={{ position: 'absolute' }}
onChange={text => {
this.setState(
{
generalPermitSelectedVehicles: [
...generalPermitSelectedVehicles,
(generalPermitSelectedVehicles[
indexes.rowIndex
].origin = text),
],
},
() => {
console.log({
generalPermitSelectedVehicles: this.state
.generalPermitSelectedVehicles,
});
},
);
}}
menuItems={[
{
label: 'America',
value: 'US',
},
{
label: 'United Kingdom',
value: 'UK',
},
{
label: 'Oman',
value: 'Oman',
},
]}
/>
);
},

Write it like this:
this.setState(prevState => {
let data = [...prevState.generalPermitSelectedVehicles];
data[indexes.rowIndex].origin = text;
return {generalPermitSelectedVehicles: data};
})
Why its failing in your case?
Because when you do:
[...arr, (arr[index].origin=10)]
It will do two things, first it will update the value of origin at that index, second it will add 10 (returned 10 from ()) at the end of array also.
Check this snippet:
let arr = [{a:1}, {a:2}, {a:3}];
arr = [...arr, (arr[1].a=500)]; //500 will get added in the last
console.log('new value', arr);
Suggestion: Use updater function (prevState) because next state (value) of generalPermitSelectedVehicles is dependent on previous value.
Check the DOC for more details about setState updater function.

You need to update the original state and not append it. You are not using spread operator correctly. Also make use of functional setState when you want to update state based on prevState. You would need to do
this.setState(
prevState => ({
generalPermitSelectedVehicles: [
...prevState.generalPermitSelectedVehicles.slice(0, index.rowIndex),
{...prevState.generalPermitSelectedVehicles[
indexes.rowIndex
], origin: text},
...prevState.generalPermitSelectedVehicles.slice(index.rowIndex + 1)
],
},
() => {
console.log({
generalPermitSelectedVehicles: this.state
.generalPermitSelectedVehicles,
});
},
);
The error in your approach is that you are appending the updated state after spreading the original state, you need to update the existing instead.
Also check this answer on how to update nested state