Mapping a JSON object stored in Redux store?
I want to map an object so that values will be accessible in my JSX each place it says value
. The object is stored as const {weather} = this.props
. Here is the JSX:
render() {
const { weather } = this.props;
return (
<div className='card border-secondary mb-3'>
<div className='card-header text-white bg-secondary'>City Information</div>
<div className='card-body'>
Lat/Long:
<div className="dropdown-divider"></div>
<div className='row'>
<div className='col-md-4 text-center'>
<h5>Tempurature (F)</h5>
<h6 className ='text-info'>value</h6>
</div>
<div className='col-md-4 text-center'>
<h5>Low (F)</h5>
<h6 className ='text-info'>value</h6>
</div>
<div className='col-md-4 text-center'>
<h5>High (F)</h5>
<h6 className ='text-info'>value</h6>
</div>
</div>
<div className='row'>
<div className='col-md-4 text-center'>
<h5>Pressure</h5>
<h6 className ='text-info'>value</h6>
</div>
<div className='col-md-4 text-center'>
<h5>Humidity</h5>
<h6 className ='text-info'>value</h6>
</div>
<div className='col-md-4 text-center'>
<h5>Wind Speed</h5>
<h6 className ='text-info'>value</h6>
<h5>Lat</h5>
<h6 className ='text-info'>value</h6>
</div>
<h5>Long</h5>
<h6 className ='text-info'>value</h6>
</div>
</div>
</div>
</div>
</div>
);
}
}
My object looks like this:
{"coord":{"lon":-95.37,"lat":29.76},"weather":[{"id":800,"main":"Clear","description":"clear sky","icon":"01n"}],"base":"stations","main":{"temp":285.56,"pressure":1022,"humidity":67,"temp_min":283.05,"temp_max":287.15},"visibility":16093,"wind":{"speed":2.27,"deg":115.002},"clouds":{"all":1},"dt":1542935700,"sys":{"type":1,"id":2646,"message":0.0041,"country":"US","sunrise":1542977570,"sunset":1543015369},"id":4699066,"name":"Houston","cod":200}
How can I use .map
method on my object to render the values that I want to display? Thank you very much.
javascript reactjs redux
add a comment |
I want to map an object so that values will be accessible in my JSX each place it says value
. The object is stored as const {weather} = this.props
. Here is the JSX:
render() {
const { weather } = this.props;
return (
<div className='card border-secondary mb-3'>
<div className='card-header text-white bg-secondary'>City Information</div>
<div className='card-body'>
Lat/Long:
<div className="dropdown-divider"></div>
<div className='row'>
<div className='col-md-4 text-center'>
<h5>Tempurature (F)</h5>
<h6 className ='text-info'>value</h6>
</div>
<div className='col-md-4 text-center'>
<h5>Low (F)</h5>
<h6 className ='text-info'>value</h6>
</div>
<div className='col-md-4 text-center'>
<h5>High (F)</h5>
<h6 className ='text-info'>value</h6>
</div>
</div>
<div className='row'>
<div className='col-md-4 text-center'>
<h5>Pressure</h5>
<h6 className ='text-info'>value</h6>
</div>
<div className='col-md-4 text-center'>
<h5>Humidity</h5>
<h6 className ='text-info'>value</h6>
</div>
<div className='col-md-4 text-center'>
<h5>Wind Speed</h5>
<h6 className ='text-info'>value</h6>
<h5>Lat</h5>
<h6 className ='text-info'>value</h6>
</div>
<h5>Long</h5>
<h6 className ='text-info'>value</h6>
</div>
</div>
</div>
</div>
</div>
);
}
}
My object looks like this:
{"coord":{"lon":-95.37,"lat":29.76},"weather":[{"id":800,"main":"Clear","description":"clear sky","icon":"01n"}],"base":"stations","main":{"temp":285.56,"pressure":1022,"humidity":67,"temp_min":283.05,"temp_max":287.15},"visibility":16093,"wind":{"speed":2.27,"deg":115.002},"clouds":{"all":1},"dt":1542935700,"sys":{"type":1,"id":2646,"message":0.0041,"country":"US","sunrise":1542977570,"sunset":1543015369},"id":4699066,"name":"Houston","cod":200}
How can I use .map
method on my object to render the values that I want to display? Thank you very much.
javascript reactjs redux
add a comment |
I want to map an object so that values will be accessible in my JSX each place it says value
. The object is stored as const {weather} = this.props
. Here is the JSX:
render() {
const { weather } = this.props;
return (
<div className='card border-secondary mb-3'>
<div className='card-header text-white bg-secondary'>City Information</div>
<div className='card-body'>
Lat/Long:
<div className="dropdown-divider"></div>
<div className='row'>
<div className='col-md-4 text-center'>
<h5>Tempurature (F)</h5>
<h6 className ='text-info'>value</h6>
</div>
<div className='col-md-4 text-center'>
<h5>Low (F)</h5>
<h6 className ='text-info'>value</h6>
</div>
<div className='col-md-4 text-center'>
<h5>High (F)</h5>
<h6 className ='text-info'>value</h6>
</div>
</div>
<div className='row'>
<div className='col-md-4 text-center'>
<h5>Pressure</h5>
<h6 className ='text-info'>value</h6>
</div>
<div className='col-md-4 text-center'>
<h5>Humidity</h5>
<h6 className ='text-info'>value</h6>
</div>
<div className='col-md-4 text-center'>
<h5>Wind Speed</h5>
<h6 className ='text-info'>value</h6>
<h5>Lat</h5>
<h6 className ='text-info'>value</h6>
</div>
<h5>Long</h5>
<h6 className ='text-info'>value</h6>
</div>
</div>
</div>
</div>
</div>
);
}
}
My object looks like this:
{"coord":{"lon":-95.37,"lat":29.76},"weather":[{"id":800,"main":"Clear","description":"clear sky","icon":"01n"}],"base":"stations","main":{"temp":285.56,"pressure":1022,"humidity":67,"temp_min":283.05,"temp_max":287.15},"visibility":16093,"wind":{"speed":2.27,"deg":115.002},"clouds":{"all":1},"dt":1542935700,"sys":{"type":1,"id":2646,"message":0.0041,"country":"US","sunrise":1542977570,"sunset":1543015369},"id":4699066,"name":"Houston","cod":200}
How can I use .map
method on my object to render the values that I want to display? Thank you very much.
javascript reactjs redux
I want to map an object so that values will be accessible in my JSX each place it says value
. The object is stored as const {weather} = this.props
. Here is the JSX:
render() {
const { weather } = this.props;
return (
<div className='card border-secondary mb-3'>
<div className='card-header text-white bg-secondary'>City Information</div>
<div className='card-body'>
Lat/Long:
<div className="dropdown-divider"></div>
<div className='row'>
<div className='col-md-4 text-center'>
<h5>Tempurature (F)</h5>
<h6 className ='text-info'>value</h6>
</div>
<div className='col-md-4 text-center'>
<h5>Low (F)</h5>
<h6 className ='text-info'>value</h6>
</div>
<div className='col-md-4 text-center'>
<h5>High (F)</h5>
<h6 className ='text-info'>value</h6>
</div>
</div>
<div className='row'>
<div className='col-md-4 text-center'>
<h5>Pressure</h5>
<h6 className ='text-info'>value</h6>
</div>
<div className='col-md-4 text-center'>
<h5>Humidity</h5>
<h6 className ='text-info'>value</h6>
</div>
<div className='col-md-4 text-center'>
<h5>Wind Speed</h5>
<h6 className ='text-info'>value</h6>
<h5>Lat</h5>
<h6 className ='text-info'>value</h6>
</div>
<h5>Long</h5>
<h6 className ='text-info'>value</h6>
</div>
</div>
</div>
</div>
</div>
);
}
}
My object looks like this:
{"coord":{"lon":-95.37,"lat":29.76},"weather":[{"id":800,"main":"Clear","description":"clear sky","icon":"01n"}],"base":"stations","main":{"temp":285.56,"pressure":1022,"humidity":67,"temp_min":283.05,"temp_max":287.15},"visibility":16093,"wind":{"speed":2.27,"deg":115.002},"clouds":{"all":1},"dt":1542935700,"sys":{"type":1,"id":2646,"message":0.0041,"country":"US","sunrise":1542977570,"sunset":1543015369},"id":4699066,"name":"Houston","cod":200}
How can I use .map
method on my object to render the values that I want to display? Thank you very much.
javascript reactjs redux
javascript reactjs redux
asked Nov 23 '18 at 2:24
sWarrensWarren
637
637
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
To map an object's properties instead of the usual array, you'll instead want to use the Object.keys(this.props.weather).map(...)
function. This will give you the key names of the weather object (ie: coord, wind). You can then use that name to get the weather object's property like so: this.props.weather[weatherPropertyKey].speed
for the 'wind' key, for example.
Here's a small demonstration:
class Weather extends React.Component {
constructor(props) {
super(props);
this.state = {
weather: {"coord":{"lon":-95.37,"lat":29.76},"weather":[{"id":800,"main":"Clear","description":"clear sky","icon":"01n"}],"base":"stations","main":{"temp":285.56,"pressure":1022,"humidity":67,"temp_min":283.05,"temp_max":287.15},"visibility":16093,"wind":{"speed":2.27,"deg":115.002},"clouds":{"all":1},"dt":1542935700,"sys":{"type":1,"id":2646,"message":0.0041,"country":"US","sunrise":1542977570,"sunset":1543015369},"id":4699066,"name":"Houston","cod":200}
};
}
render() {
return (
<div>
{this.state.weather &&
Object.keys(this.state.weather).map((weatherPropertyKey) => {
return <div><b>{weatherPropertyKey}</b> = {JSON.stringify(this.state.weather[weatherPropertyKey])}</div>;
})}
</div>
);
}
}
// Render it
ReactDOM.render(
<Weather/>,
document.getElementById("react")
);
<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
add a comment |
I think you misunderstand what a map function does. JavaScript objects basically are a map, i.e. key value pairs. Use mapStateToProps
to map the object stored in the redux state to a prop the component uses, then just access it like any other object, i.e. this.props.stateObject.fieldValue
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%2f53439953%2fmapping-a-json-object-stored-in-redux-store%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
To map an object's properties instead of the usual array, you'll instead want to use the Object.keys(this.props.weather).map(...)
function. This will give you the key names of the weather object (ie: coord, wind). You can then use that name to get the weather object's property like so: this.props.weather[weatherPropertyKey].speed
for the 'wind' key, for example.
Here's a small demonstration:
class Weather extends React.Component {
constructor(props) {
super(props);
this.state = {
weather: {"coord":{"lon":-95.37,"lat":29.76},"weather":[{"id":800,"main":"Clear","description":"clear sky","icon":"01n"}],"base":"stations","main":{"temp":285.56,"pressure":1022,"humidity":67,"temp_min":283.05,"temp_max":287.15},"visibility":16093,"wind":{"speed":2.27,"deg":115.002},"clouds":{"all":1},"dt":1542935700,"sys":{"type":1,"id":2646,"message":0.0041,"country":"US","sunrise":1542977570,"sunset":1543015369},"id":4699066,"name":"Houston","cod":200}
};
}
render() {
return (
<div>
{this.state.weather &&
Object.keys(this.state.weather).map((weatherPropertyKey) => {
return <div><b>{weatherPropertyKey}</b> = {JSON.stringify(this.state.weather[weatherPropertyKey])}</div>;
})}
</div>
);
}
}
// Render it
ReactDOM.render(
<Weather/>,
document.getElementById("react")
);
<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
add a comment |
To map an object's properties instead of the usual array, you'll instead want to use the Object.keys(this.props.weather).map(...)
function. This will give you the key names of the weather object (ie: coord, wind). You can then use that name to get the weather object's property like so: this.props.weather[weatherPropertyKey].speed
for the 'wind' key, for example.
Here's a small demonstration:
class Weather extends React.Component {
constructor(props) {
super(props);
this.state = {
weather: {"coord":{"lon":-95.37,"lat":29.76},"weather":[{"id":800,"main":"Clear","description":"clear sky","icon":"01n"}],"base":"stations","main":{"temp":285.56,"pressure":1022,"humidity":67,"temp_min":283.05,"temp_max":287.15},"visibility":16093,"wind":{"speed":2.27,"deg":115.002},"clouds":{"all":1},"dt":1542935700,"sys":{"type":1,"id":2646,"message":0.0041,"country":"US","sunrise":1542977570,"sunset":1543015369},"id":4699066,"name":"Houston","cod":200}
};
}
render() {
return (
<div>
{this.state.weather &&
Object.keys(this.state.weather).map((weatherPropertyKey) => {
return <div><b>{weatherPropertyKey}</b> = {JSON.stringify(this.state.weather[weatherPropertyKey])}</div>;
})}
</div>
);
}
}
// Render it
ReactDOM.render(
<Weather/>,
document.getElementById("react")
);
<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
add a comment |
To map an object's properties instead of the usual array, you'll instead want to use the Object.keys(this.props.weather).map(...)
function. This will give you the key names of the weather object (ie: coord, wind). You can then use that name to get the weather object's property like so: this.props.weather[weatherPropertyKey].speed
for the 'wind' key, for example.
Here's a small demonstration:
class Weather extends React.Component {
constructor(props) {
super(props);
this.state = {
weather: {"coord":{"lon":-95.37,"lat":29.76},"weather":[{"id":800,"main":"Clear","description":"clear sky","icon":"01n"}],"base":"stations","main":{"temp":285.56,"pressure":1022,"humidity":67,"temp_min":283.05,"temp_max":287.15},"visibility":16093,"wind":{"speed":2.27,"deg":115.002},"clouds":{"all":1},"dt":1542935700,"sys":{"type":1,"id":2646,"message":0.0041,"country":"US","sunrise":1542977570,"sunset":1543015369},"id":4699066,"name":"Houston","cod":200}
};
}
render() {
return (
<div>
{this.state.weather &&
Object.keys(this.state.weather).map((weatherPropertyKey) => {
return <div><b>{weatherPropertyKey}</b> = {JSON.stringify(this.state.weather[weatherPropertyKey])}</div>;
})}
</div>
);
}
}
// Render it
ReactDOM.render(
<Weather/>,
document.getElementById("react")
);
<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
To map an object's properties instead of the usual array, you'll instead want to use the Object.keys(this.props.weather).map(...)
function. This will give you the key names of the weather object (ie: coord, wind). You can then use that name to get the weather object's property like so: this.props.weather[weatherPropertyKey].speed
for the 'wind' key, for example.
Here's a small demonstration:
class Weather extends React.Component {
constructor(props) {
super(props);
this.state = {
weather: {"coord":{"lon":-95.37,"lat":29.76},"weather":[{"id":800,"main":"Clear","description":"clear sky","icon":"01n"}],"base":"stations","main":{"temp":285.56,"pressure":1022,"humidity":67,"temp_min":283.05,"temp_max":287.15},"visibility":16093,"wind":{"speed":2.27,"deg":115.002},"clouds":{"all":1},"dt":1542935700,"sys":{"type":1,"id":2646,"message":0.0041,"country":"US","sunrise":1542977570,"sunset":1543015369},"id":4699066,"name":"Houston","cod":200}
};
}
render() {
return (
<div>
{this.state.weather &&
Object.keys(this.state.weather).map((weatherPropertyKey) => {
return <div><b>{weatherPropertyKey}</b> = {JSON.stringify(this.state.weather[weatherPropertyKey])}</div>;
})}
</div>
);
}
}
// Render it
ReactDOM.render(
<Weather/>,
document.getElementById("react")
);
<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
class Weather extends React.Component {
constructor(props) {
super(props);
this.state = {
weather: {"coord":{"lon":-95.37,"lat":29.76},"weather":[{"id":800,"main":"Clear","description":"clear sky","icon":"01n"}],"base":"stations","main":{"temp":285.56,"pressure":1022,"humidity":67,"temp_min":283.05,"temp_max":287.15},"visibility":16093,"wind":{"speed":2.27,"deg":115.002},"clouds":{"all":1},"dt":1542935700,"sys":{"type":1,"id":2646,"message":0.0041,"country":"US","sunrise":1542977570,"sunset":1543015369},"id":4699066,"name":"Houston","cod":200}
};
}
render() {
return (
<div>
{this.state.weather &&
Object.keys(this.state.weather).map((weatherPropertyKey) => {
return <div><b>{weatherPropertyKey}</b> = {JSON.stringify(this.state.weather[weatherPropertyKey])}</div>;
})}
</div>
);
}
}
// Render it
ReactDOM.render(
<Weather/>,
document.getElementById("react")
);
<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
class Weather extends React.Component {
constructor(props) {
super(props);
this.state = {
weather: {"coord":{"lon":-95.37,"lat":29.76},"weather":[{"id":800,"main":"Clear","description":"clear sky","icon":"01n"}],"base":"stations","main":{"temp":285.56,"pressure":1022,"humidity":67,"temp_min":283.05,"temp_max":287.15},"visibility":16093,"wind":{"speed":2.27,"deg":115.002},"clouds":{"all":1},"dt":1542935700,"sys":{"type":1,"id":2646,"message":0.0041,"country":"US","sunrise":1542977570,"sunset":1543015369},"id":4699066,"name":"Houston","cod":200}
};
}
render() {
return (
<div>
{this.state.weather &&
Object.keys(this.state.weather).map((weatherPropertyKey) => {
return <div><b>{weatherPropertyKey}</b> = {JSON.stringify(this.state.weather[weatherPropertyKey])}</div>;
})}
</div>
);
}
}
// Render it
ReactDOM.render(
<Weather/>,
document.getElementById("react")
);
<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
answered Nov 23 '18 at 3:59
Shawn AndrewsShawn Andrews
965617
965617
add a comment |
add a comment |
I think you misunderstand what a map function does. JavaScript objects basically are a map, i.e. key value pairs. Use mapStateToProps
to map the object stored in the redux state to a prop the component uses, then just access it like any other object, i.e. this.props.stateObject.fieldValue
add a comment |
I think you misunderstand what a map function does. JavaScript objects basically are a map, i.e. key value pairs. Use mapStateToProps
to map the object stored in the redux state to a prop the component uses, then just access it like any other object, i.e. this.props.stateObject.fieldValue
add a comment |
I think you misunderstand what a map function does. JavaScript objects basically are a map, i.e. key value pairs. Use mapStateToProps
to map the object stored in the redux state to a prop the component uses, then just access it like any other object, i.e. this.props.stateObject.fieldValue
I think you misunderstand what a map function does. JavaScript objects basically are a map, i.e. key value pairs. Use mapStateToProps
to map the object stored in the redux state to a prop the component uses, then just access it like any other object, i.e. this.props.stateObject.fieldValue
answered Nov 23 '18 at 2:47
Drew ReeseDrew Reese
940211
940211
add a comment |
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%2f53439953%2fmapping-a-json-object-stored-in-redux-store%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