Cannot access a key value pair of a changed object
Please excuse my code
From an external source , I am given the following external data which I name loxAP3
to which I am trying to firstly retrieve svg data related to the rooms.image property and then change the incoming svg data to work with react, using the following code.
createRoomData(loxAPP3, socket) {
console.log(loxAPP3)
let rooms =
let rawRooms = loxAPP3.rooms
for (const rawRoom in rawRooms) {
rooms.push(rawRooms[rawRoom])
}
//add svg property with blank property value
rooms.forEach((room) => {
room.svg = ''
})
//fetch image data for each room in loxApp3.rooms
rooms.forEach((room) => {
const image = room.image
socket
.send(image)
.then(function(respons) {
//console.log("Successfully fetched svg image " + respons ); // success
room.svg = respons
//console.log(room.svg) // success console returns room.svg data
},
function(err) {
console.error(err);
}
);
})
this.setState({
rooms: rooms
}, () => {
console.log(rooms) // success rooms[0].svg is shown as having been populated
this.adjustSvGImageToReact()
})
}
console.log(rooms) // success rooms[0].svg is shown as having been populated
However the problem comes when I try and manipulate the room object, if I log a property that already existed from the original data, there is no problem, however if I try an fetch the .svg property it comes back not as undefined but as the empty string I first set it to be.
adjustSvGImageToReact() {
this.state.rooms.forEach((room)=>{
console.log(room.name) // success
console.log(room.uuid) // success
console.log(room.svg) //empty
})
}
javascript javascript-objects
edited Nov 12 '18 at 23:22
Phil
96.2k11136157
asked Nov 12 '18 at 23:12
FluxFlux
33
add a comment |
Please excuse my code
From an external source , I am given the following external data which I name loxAP3
to which I am trying to firstly retrieve svg data related to the rooms.image property and then change the incoming svg data to work with react, using the following code.
createRoomData(loxAPP3, socket) {
console.log(loxAPP3)
let rooms =
let rawRooms = loxAPP3.rooms
for (const rawRoom in rawRooms) {
rooms.push(rawRooms[rawRoom])
}
//add svg property with blank property value
rooms.forEach((room) => {
room.svg = ''
})
//fetch image data for each room in loxApp3.rooms
rooms.forEach((room) => {
const image = room.image
socket
.send(image)
.then(function(respons) {
//console.log("Successfully fetched svg image " + respons ); // success
room.svg = respons
//console.log(room.svg) // success console returns room.svg data
},
function(err) {
console.error(err);
}
);
})
this.setState({
rooms: rooms
}, () => {
console.log(rooms) // success rooms[0].svg is shown as having been populated
this.adjustSvGImageToReact()
})
}
console.log(rooms) // success rooms[0].svg is shown as having been populated
However the problem comes when I try and manipulate the room object, if I log a property that already existed from the original data, there is no problem, however if I try an fetch the .svg property it comes back not as undefined but as the empty string I first set it to be.
adjustSvGImageToReact() {
this.state.rooms.forEach((room)=>{
console.log(room.name) // success
console.log(room.uuid) // success
console.log(room.svg) //empty
})
}
javascript javascript-objects
edited Nov 12 '18 at 23:22
Phil
96.2k11136157
asked Nov 12 '18 at 23:12
FluxFlux
33
1
socket.send()is asynchronous soroom.svg = responswill happen after you setState and after you callthis.adjustSvGImageToReact()
– charlietfl
Nov 12 '18 at 23:18
1
Also important to understand that objects logged in console are not snapshots, they are live objects. Properties that are updated after you log the object will show as updated in console
– charlietfl
Nov 12 '18 at 23:27
I suspected as much, but being new to javascript and callbacks, I have no real idea how to ensure I have the full dataset before proceeding. Any help would be appreciated
– Flux
Nov 12 '18 at 23:39
add a comment |
Please excuse my code
From an external source , I am given the following external data which I name loxAP3
to which I am trying to firstly retrieve svg data related to the rooms.image property and then change the incoming svg data to work with react, using the following code.
createRoomData(loxAPP3, socket) {
console.log(loxAPP3)
let rooms =
let rawRooms = loxAPP3.rooms
for (const rawRoom in rawRooms) {
rooms.push(rawRooms[rawRoom])
}
//add svg property with blank property value
rooms.forEach((room) => {
room.svg = ''
})
//fetch image data for each room in loxApp3.rooms
rooms.forEach((room) => {
const image = room.image
socket
.send(image)
.then(function(respons) {
//console.log("Successfully fetched svg image " + respons ); // success
room.svg = respons
//console.log(room.svg) // success console returns room.svg data
},
function(err) {
console.error(err);
}
);
})
this.setState({
rooms: rooms
}, () => {
console.log(rooms) // success rooms[0].svg is shown as having been populated
this.adjustSvGImageToReact()
})
}
console.log(rooms) // success rooms[0].svg is shown as having been populated
However the problem comes when I try and manipulate the room object, if I log a property that already existed from the original data, there is no problem, however if I try an fetch the .svg property it comes back not as undefined but as the empty string I first set it to be.
adjustSvGImageToReact() {
this.state.rooms.forEach((room)=>{
console.log(room.name) // success
console.log(room.uuid) // success
console.log(room.svg) //empty
})
}
javascript javascript-objects
edited Nov 12 '18 at 23:22
Phil
96.2k11136157
asked Nov 12 '18 at 23:12
FluxFlux
33
Please excuse my code
From an external source , I am given the following external data which I name loxAP3
to which I am trying to firstly retrieve svg data related to the rooms.image property and then change the incoming svg data to work with react, using the following code.
createRoomData(loxAPP3, socket) {
console.log(loxAPP3)
let rooms =
let rawRooms = loxAPP3.rooms
for (const rawRoom in rawRooms) {
rooms.push(rawRooms[rawRoom])
}
//add svg property with blank property value
rooms.forEach((room) => {
room.svg = ''
})
//fetch image data for each room in loxApp3.rooms
rooms.forEach((room) => {
const image = room.image
socket
.send(image)
.then(function(respons) {
//console.log("Successfully fetched svg image " + respons ); // success
room.svg = respons
//console.log(room.svg) // success console returns room.svg data
},
function(err) {
console.error(err);
}
);
})
this.setState({
rooms: rooms
}, () => {
console.log(rooms) // success rooms[0].svg is shown as having been populated
this.adjustSvGImageToReact()
})
}
console.log(rooms) // success rooms[0].svg is shown as having been populated
However the problem comes when I try and manipulate the room object, if I log a property that already existed from the original data, there is no problem, however if I try an fetch the .svg property it comes back not as undefined but as the empty string I first set it to be.
adjustSvGImageToReact() {
this.state.rooms.forEach((room)=>{
console.log(room.name) // success
console.log(room.uuid) // success
console.log(room.svg) //empty
})
}
javascript javascript-objects
javascript javascript-objects
edited Nov 12 '18 at 23:22
Phil
96.2k11136157
asked Nov 12 '18 at 23:12
FluxFlux
33
edited Nov 12 '18 at 23:22
Phil
96.2k11136157
asked Nov 12 '18 at 23:12
FluxFlux
33
edited Nov 12 '18 at 23:22
Phil
96.2k11136157
edited Nov 12 '18 at 23:22
Phil
96.2k11136157
edited Nov 12 '18 at 23:22
Phil
96.2k11136157
96.2k11136157
asked Nov 12 '18 at 23:12
FluxFlux
33
asked Nov 12 '18 at 23:12
FluxFlux
33
asked Nov 12 '18 at 23:12
FluxFlux
33
33
1
socket.send()is asynchronous soroom.svg = responswill happen after you setState and after you callthis.adjustSvGImageToReact()
– charlietfl
Nov 12 '18 at 23:18
1
Also important to understand that objects logged in console are not snapshots, they are live objects. Properties that are updated after you log the object will show as updated in console
– charlietfl
Nov 12 '18 at 23:27
I suspected as much, but being new to javascript and callbacks, I have no real idea how to ensure I have the full dataset before proceeding. Any help would be appreciated
– Flux
Nov 12 '18 at 23:39
add a comment |
1
socket.send()is asynchronous soroom.svg = responswill happen after you setState and after you callthis.adjustSvGImageToReact()
– charlietfl
Nov 12 '18 at 23:18
1
Also important to understand that objects logged in console are not snapshots, they are live objects. Properties that are updated after you log the object will show as updated in console
– charlietfl
Nov 12 '18 at 23:27
I suspected as much, but being new to javascript and callbacks, I have no real idea how to ensure I have the full dataset before proceeding. Any help would be appreciated
– Flux
Nov 12 '18 at 23:39
1
1
socket.send() is asynchronous so room.svg = respons will happen after you setState and after you call this.adjustSvGImageToReact()– charlietfl
Nov 12 '18 at 23:18
socket.send() is asynchronous so room.svg = respons will happen after you setState and after you call this.adjustSvGImageToReact()– charlietfl
Nov 12 '18 at 23:18
1
1
Also important to understand that objects logged in console are not snapshots, they are live objects. Properties that are updated after you log the object will show as updated in console
– charlietfl
Nov 12 '18 at 23:27
Also important to understand that objects logged in console are not snapshots, they are live objects. Properties that are updated after you log the object will show as updated in console
– charlietfl
Nov 12 '18 at 23:27
I suspected as much, but being new to javascript and callbacks, I have no real idea how to ensure I have the full dataset before proceeding. Any help would be appreciated
– Flux
Nov 12 '18 at 23:39
I suspected as much, but being new to javascript and callbacks, I have no real idea how to ensure I have the full dataset before proceeding. Any help would be appreciated
– Flux
Nov 12 '18 at 23:39
add a comment |
1 Answer
1
active
oldest
votes
Create an array of the socket.send() promises instead of calling them inside forEach
Then you can use Promise.all() to set the state and call adjustSvGImageToReact() after the socket requests have completed
const svgPromises = rooms.map((room) => {
const image = room.image
return socket
.send(image)
.then((respons)=> room.svg = respons)
})
Promise.all(svgPromises).then(() => {
this.setState({rooms: rooms}, () => {
console.log(rooms) // success rooms[0].svg is shown as having been populated
this.adjustSvGImageToReact()
});
}).catch(err=>console.log('One of the socket requests failed'))
answered Nov 12 '18 at 23:37
charlietflcharlietfl
139k1386118
Thank you i will do that
– Flux
Nov 13 '18 at 10:11
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53271452%2fcannot-access-a-key-value-pair-of-a-changed-object%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Create an array of the socket.send() promises instead of calling them inside forEach
Then you can use Promise.all() to set the state and call adjustSvGImageToReact() after the socket requests have completed
const svgPromises = rooms.map((room) => {
const image = room.image
return socket
.send(image)
.then((respons)=> room.svg = respons)
})
Promise.all(svgPromises).then(() => {
this.setState({rooms: rooms}, () => {
console.log(rooms) // success rooms[0].svg is shown as having been populated
this.adjustSvGImageToReact()
});
}).catch(err=>console.log('One of the socket requests failed'))
answered Nov 12 '18 at 23:37
charlietflcharlietfl
139k1386118
Thank you i will do that
– Flux
Nov 13 '18 at 10:11
add a comment |
Create an array of the socket.send() promises instead of calling them inside forEach
Then you can use Promise.all() to set the state and call adjustSvGImageToReact() after the socket requests have completed
const svgPromises = rooms.map((room) => {
const image = room.image
return socket
.send(image)
.then((respons)=> room.svg = respons)
})
Promise.all(svgPromises).then(() => {
this.setState({rooms: rooms}, () => {
console.log(rooms) // success rooms[0].svg is shown as having been populated
this.adjustSvGImageToReact()
});
}).catch(err=>console.log('One of the socket requests failed'))
answered Nov 12 '18 at 23:37
charlietflcharlietfl
139k1386118
Thank you i will do that
– Flux
Nov 13 '18 at 10:11
add a comment |
Create an array of the socket.send() promises instead of calling them inside forEach
Then you can use Promise.all() to set the state and call adjustSvGImageToReact() after the socket requests have completed
const svgPromises = rooms.map((room) => {
const image = room.image
return socket
.send(image)
.then((respons)=> room.svg = respons)
})
Promise.all(svgPromises).then(() => {
this.setState({rooms: rooms}, () => {
console.log(rooms) // success rooms[0].svg is shown as having been populated
this.adjustSvGImageToReact()
});
}).catch(err=>console.log('One of the socket requests failed'))
answered Nov 12 '18 at 23:37
charlietflcharlietfl
139k1386118
Create an array of the socket.send() promises instead of calling them inside forEach
Then you can use Promise.all() to set the state and call adjustSvGImageToReact() after the socket requests have completed
const svgPromises = rooms.map((room) => {
const image = room.image
return socket
.send(image)
.then((respons)=> room.svg = respons)
})
Promise.all(svgPromises).then(() => {
this.setState({rooms: rooms}, () => {
console.log(rooms) // success rooms[0].svg is shown as having been populated
this.adjustSvGImageToReact()
});
}).catch(err=>console.log('One of the socket requests failed'))
answered Nov 12 '18 at 23:37
charlietflcharlietfl
139k1386118
answered Nov 12 '18 at 23:37
charlietflcharlietfl
139k1386118
answered Nov 12 '18 at 23:37
charlietflcharlietfl
139k1386118
answered Nov 12 '18 at 23:37
charlietflcharlietfl
139k1386118
139k1386118
Thank you i will do that
– Flux
Nov 13 '18 at 10:11
add a comment |
Thank you i will do that
– Flux
Nov 13 '18 at 10:11
Thank you i will do that
– Flux
Nov 13 '18 at 10:11
Thank you i will do that
– Flux
Nov 13 '18 at 10:11
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53271452%2fcannot-access-a-key-value-pair-of-a-changed-object%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
socket.send()is asynchronous soroom.svg = responswill happen after you setState and after you callthis.adjustSvGImageToReact()– charlietfl
Nov 12 '18 at 23:18
1
Also important to understand that objects logged in console are not snapshots, they are live objects. Properties that are updated after you log the object will show as updated in console
– charlietfl
Nov 12 '18 at 23:27
I suspected as much, but being new to javascript and callbacks, I have no real idea how to ensure I have the full dataset before proceeding. Any help would be appreciated
– Flux
Nov 12 '18 at 23:39