Get API Json data in object and array format using redux and reactjs

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}

I am successful in getting the data from the sample code in the below tutorial with Redux.

https://codepen.io/stowball/post/a-dummy-s-guide-to-redux-and-thunk-in-react

Below is the format used in the tutorial which works great.

[

    {

        "id": 1,

        "label": "List item 1"

    },

    {

        "id": 2,

        "label": "List item 2"

    },

    {

        "id": 3,

        "label": "List item 3"

    },

    {

        "id": "4",

        "label": "label 4"

    },

    {

        "id": "5",

        "label": "label 5"

    }

]

But I tried several ways and unable to pass the data in the format below

{     

    "banner": [ 

        { "key": "product", "id": "84535", "image_url": "/media/emthemes/slideshow/s/u/sultry-app_12.jpg" }, 

        { "key": "category", "id": "2629", "image_url": "/media/emthemes/slideshow/l/i/limecrime-app.jpg" }, 

        { "key": "product", "id": "84654", "image_url": "/media/emthemes/slideshow/a/m/ameera-app-banner.jpg" } 

    ] 

}

Current Reducer and mapping component in another file :

export function items(state = , action) {

    switch (action.type) {

        case 'ITEMS_FETCH_DATA_SUCCESS':

            return action.items;



        default:

            return state;

    }

}



return (

            <ul>

            {this.props.items.map((item) => (

              <li key={item.id}>

                {item.id}

              </li>

            ))}

            </ul>

        );

Tried with below changes in reducer:

export function items(state = {banner:}, action) {

    switch (action.type) {

        case 'ITEMS_FETCH_DATA_SUCCESS':

            return action.items;



        default:

            return state;

    }

}

edited Nov 24 '18 at 13:02

asked Nov 24 '18 at 12:04

H.Husain

549

Could you be more specific in what you need?

– c-chavez
Nov 24 '18 at 12:31

I need to map and display the data in the below JSON format in my component. { "banner": [ { "key": "product", "id": "84535", "image_url": "/media/emthemes/slideshow/s/u/sultry-app_12.jpg" }, { "key": "category", "id": "2629", "image_url": "/media/emthemes/slideshow/l/i/limecrime-app.jpg" }, { "key": "product", "id": "84654", "image_url": "/media/emthemes/slideshow/a/m/ameera-app-banner.jpg" } ] } Please check my edit in question for more details. Let me know if you need more information.

– H.Husain
Nov 24 '18 at 12:47

add a comment |

I am successful in getting the data from the sample code in the below tutorial with Redux.

https://codepen.io/stowball/post/a-dummy-s-guide-to-redux-and-thunk-in-react

Below is the format used in the tutorial which works great.

[

    {

        "id": 1,

        "label": "List item 1"

    },

    {

        "id": 2,

        "label": "List item 2"

    },

    {

        "id": 3,

        "label": "List item 3"

    },

    {

        "id": "4",

        "label": "label 4"

    },

    {

        "id": "5",

        "label": "label 5"

    }

]

But I tried several ways and unable to pass the data in the format below

{     

    "banner": [ 

        { "key": "product", "id": "84535", "image_url": "/media/emthemes/slideshow/s/u/sultry-app_12.jpg" }, 

        { "key": "category", "id": "2629", "image_url": "/media/emthemes/slideshow/l/i/limecrime-app.jpg" }, 

        { "key": "product", "id": "84654", "image_url": "/media/emthemes/slideshow/a/m/ameera-app-banner.jpg" } 

    ] 

}

Current Reducer and mapping component in another file :

export function items(state = , action) {

    switch (action.type) {

        case 'ITEMS_FETCH_DATA_SUCCESS':

            return action.items;



        default:

            return state;

    }

}



return (

            <ul>

            {this.props.items.map((item) => (

              <li key={item.id}>

                {item.id}

              </li>

            ))}

            </ul>

        );

Tried with below changes in reducer:

export function items(state = {banner:}, action) {

    switch (action.type) {

        case 'ITEMS_FETCH_DATA_SUCCESS':

            return action.items;



        default:

            return state;

    }

}

edited Nov 24 '18 at 13:02

asked Nov 24 '18 at 12:04

H.Husain

549

Could you be more specific in what you need?

– c-chavez
Nov 24 '18 at 12:31

I need to map and display the data in the below JSON format in my component. { "banner": [ { "key": "product", "id": "84535", "image_url": "/media/emthemes/slideshow/s/u/sultry-app_12.jpg" }, { "key": "category", "id": "2629", "image_url": "/media/emthemes/slideshow/l/i/limecrime-app.jpg" }, { "key": "product", "id": "84654", "image_url": "/media/emthemes/slideshow/a/m/ameera-app-banner.jpg" } ] } Please check my edit in question for more details. Let me know if you need more information.

– H.Husain
Nov 24 '18 at 12:47

add a comment |

I am successful in getting the data from the sample code in the below tutorial with Redux.

https://codepen.io/stowball/post/a-dummy-s-guide-to-redux-and-thunk-in-react

Below is the format used in the tutorial which works great.

[

    {

        "id": 1,

        "label": "List item 1"

    },

    {

        "id": 2,

        "label": "List item 2"

    },

    {

        "id": 3,

        "label": "List item 3"

    },

    {

        "id": "4",

        "label": "label 4"

    },

    {

        "id": "5",

        "label": "label 5"

    }

]

But I tried several ways and unable to pass the data in the format below

{     

    "banner": [ 

        { "key": "product", "id": "84535", "image_url": "/media/emthemes/slideshow/s/u/sultry-app_12.jpg" }, 

        { "key": "category", "id": "2629", "image_url": "/media/emthemes/slideshow/l/i/limecrime-app.jpg" }, 

        { "key": "product", "id": "84654", "image_url": "/media/emthemes/slideshow/a/m/ameera-app-banner.jpg" } 

    ] 

}

Current Reducer and mapping component in another file :

export function items(state = , action) {

    switch (action.type) {

        case 'ITEMS_FETCH_DATA_SUCCESS':

            return action.items;



        default:

            return state;

    }

}



return (

            <ul>

            {this.props.items.map((item) => (

              <li key={item.id}>

                {item.id}

              </li>

            ))}

            </ul>

        );

Tried with below changes in reducer:

export function items(state = {banner:}, action) {

    switch (action.type) {

        case 'ITEMS_FETCH_DATA_SUCCESS':

            return action.items;



        default:

            return state;

    }

}

edited Nov 24 '18 at 13:02

asked Nov 24 '18 at 12:04

H.Husain

549

I am successful in getting the data from the sample code in the below tutorial with Redux.

https://codepen.io/stowball/post/a-dummy-s-guide-to-redux-and-thunk-in-react

Below is the format used in the tutorial which works great.

[

    {

        "id": 1,

        "label": "List item 1"

    },

    {

        "id": 2,

        "label": "List item 2"

    },

    {

        "id": 3,

        "label": "List item 3"

    },

    {

        "id": "4",

        "label": "label 4"

    },

    {

        "id": "5",

        "label": "label 5"

    }

]

But I tried several ways and unable to pass the data in the format below

{     

    "banner": [ 

        { "key": "product", "id": "84535", "image_url": "/media/emthemes/slideshow/s/u/sultry-app_12.jpg" }, 

        { "key": "category", "id": "2629", "image_url": "/media/emthemes/slideshow/l/i/limecrime-app.jpg" }, 

        { "key": "product", "id": "84654", "image_url": "/media/emthemes/slideshow/a/m/ameera-app-banner.jpg" } 

    ] 

}

Current Reducer and mapping component in another file :

export function items(state = , action) {

    switch (action.type) {

        case 'ITEMS_FETCH_DATA_SUCCESS':

            return action.items;



        default:

            return state;

    }

}



return (

            <ul>

            {this.props.items.map((item) => (

              <li key={item.id}>

                {item.id}

              </li>

            ))}

            </ul>

        );

Tried with below changes in reducer:

export function items(state = {banner:}, action) {

    switch (action.type) {

        case 'ITEMS_FETCH_DATA_SUCCESS':

            return action.items;



        default:

            return state;

    }

}

reactjs redux

edited Nov 24 '18 at 13:02

asked Nov 24 '18 at 12:04

H.Husain

549

edited Nov 24 '18 at 13:02

asked Nov 24 '18 at 12:04

H.Husain

549

edited Nov 24 '18 at 13:02

asked Nov 24 '18 at 12:04

H.Husain

549

asked Nov 24 '18 at 12:04

H.Husain

549

asked Nov 24 '18 at 12:04

H.Husain

549

Could you be more specific in what you need?

– c-chavez
Nov 24 '18 at 12:31

I need to map and display the data in the below JSON format in my component. { "banner": [ { "key": "product", "id": "84535", "image_url": "/media/emthemes/slideshow/s/u/sultry-app_12.jpg" }, { "key": "category", "id": "2629", "image_url": "/media/emthemes/slideshow/l/i/limecrime-app.jpg" }, { "key": "product", "id": "84654", "image_url": "/media/emthemes/slideshow/a/m/ameera-app-banner.jpg" } ] } Please check my edit in question for more details. Let me know if you need more information.

– H.Husain
Nov 24 '18 at 12:47

add a comment |

Could you be more specific in what you need?

– c-chavez
Nov 24 '18 at 12:31

I need to map and display the data in the below JSON format in my component. { "banner": [ { "key": "product", "id": "84535", "image_url": "/media/emthemes/slideshow/s/u/sultry-app_12.jpg" }, { "key": "category", "id": "2629", "image_url": "/media/emthemes/slideshow/l/i/limecrime-app.jpg" }, { "key": "product", "id": "84654", "image_url": "/media/emthemes/slideshow/a/m/ameera-app-banner.jpg" } ] } Please check my edit in question for more details. Let me know if you need more information.

– H.Husain
Nov 24 '18 at 12:47

Could you be more specific in what you need?

– c-chavez
Nov 24 '18 at 12:31

I need to map and display the data in the below JSON format in my component.

{          "banner": [          { "key": "product", "id": "84535", "image_url": "/media/emthemes/slideshow/s/u/sultry-app_12.jpg" },          { "key": "category", "id": "2629", "image_url": "/media/emthemes/slideshow/l/i/limecrime-app.jpg" },          { "key": "product", "id": "84654", "image_url": "/media/emthemes/slideshow/a/m/ameera-app-banner.jpg" }      ]  }

Please check my edit in question for more details. Let me know if you need more information.

– H.Husain
Nov 24 '18 at 12:47

I need to map and display the data in the below JSON format in my component.

{          "banner": [          { "key": "product", "id": "84535", "image_url": "/media/emthemes/slideshow/s/u/sultry-app_12.jpg" },          { "key": "category", "id": "2629", "image_url": "/media/emthemes/slideshow/l/i/limecrime-app.jpg" },          { "key": "product", "id": "84654", "image_url": "/media/emthemes/slideshow/a/m/ameera-app-banner.jpg" }      ]  }

Please check my edit in question for more details. Let me know if you need more information.

– H.Husain
Nov 24 '18 at 12:47

add a comment |

1 Answer
1

active

oldest

votes

change reducer to this:

{this.props.items.banner.map((item) => (

              <li key={item.id}>

                {item.id}

                {item.key}

                {item.image_url}

              </li>

            ))}

And change the PropTypes of items in ItemList.js

items: PropTypes.object.isRequired

I have tried the tutorial and created a working example here:
https://github.com/stackOverflow166/redux-nwb

Edit2:

Cannot read property 'map'

This is problem is about the date type.Add this to the ItemList.js to change the date type to array.Only array has the map function.

let bannerArray = 

let banner = this.props.items.banner

for (let key in banner){

     bannerArray.push(banner[key])

}

edited Nov 25 '18 at 10:07

answered Nov 24 '18 at 14:15

Root

1,563139

Hii, Thanks for making the example and replying to my question. I did as you suggested but i am still getting the mapping error. See below error info : TypeError: Cannot read property 'map' of undefined Warning: Failed prop type: Invalid prop items of type array supplied to ItemList, expected object. Note: I am using react version "react": "^16.6.1" Importing Proptype like this import PropTypes from 'prop-types';

– H.Husain
Nov 25 '18 at 7:27

I believe there is some problem with the latest version of react and redux, because your example works great with the old one. Can you please check with the latest version. Thanks in advance.

– H.Husain
Nov 25 '18 at 7:43

@user1328423 about the map error,I have changed my answer, and about the propTypes error, please share your code about PropTypes.So I can check it.

– Root
Nov 25 '18 at 10:11

Hello, Thanks for the reply. I just tried with the latest update given by you but it is still not working. Following is the code i have used in Itemlist.js constructor(props) { super(props); let bannerArray = ; let banner = this.props.items.banner for (let key in banner) { bannerArray.push(banner[key]); } this.state = { bannerArray }; } ` <ul> {this.state.bannerArray.map((item) => ( <li key={item.id}>{item.key}</li> ))} </ul> `

– H.Husain
Nov 25 '18 at 13:23

You can check my full code on this repo [ github.com/huzefahusain786/React-Redux ] Kindly help to finish this. I need a robust solution because I may have to use single JSON for multiple components.

– H.Husain
Nov 25 '18 at 13:26

|
show 4 more comments

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
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53457959%2fget-api-json-data-in-object-and-array-format-using-redux-and-reactjs%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

change reducer to this:

{this.props.items.banner.map((item) => (

              <li key={item.id}>

                {item.id}

                {item.key}

                {item.image_url}

              </li>

            ))}

And change the PropTypes of items in ItemList.js

items: PropTypes.object.isRequired

I have tried the tutorial and created a working example here:
https://github.com/stackOverflow166/redux-nwb

Edit2:

Cannot read property 'map'

This is problem is about the date type.Add this to the ItemList.js to change the date type to array.Only array has the map function.

let bannerArray = 

let banner = this.props.items.banner

for (let key in banner){

     bannerArray.push(banner[key])

}

edited Nov 25 '18 at 10:07

answered Nov 24 '18 at 14:15

Root

1,563139

Hii, Thanks for making the example and replying to my question. I did as you suggested but i am still getting the mapping error. See below error info : TypeError: Cannot read property 'map' of undefined Warning: Failed prop type: Invalid prop items of type array supplied to ItemList, expected object. Note: I am using react version "react": "^16.6.1" Importing Proptype like this import PropTypes from 'prop-types';

– H.Husain
Nov 25 '18 at 7:27

I believe there is some problem with the latest version of react and redux, because your example works great with the old one. Can you please check with the latest version. Thanks in advance.

– H.Husain
Nov 25 '18 at 7:43

@user1328423 about the map error,I have changed my answer, and about the propTypes error, please share your code about PropTypes.So I can check it.

– Root
Nov 25 '18 at 10:11

Hello, Thanks for the reply. I just tried with the latest update given by you but it is still not working. Following is the code i have used in Itemlist.js constructor(props) { super(props); let bannerArray = ; let banner = this.props.items.banner for (let key in banner) { bannerArray.push(banner[key]); } this.state = { bannerArray }; } ` <ul> {this.state.bannerArray.map((item) => ( <li key={item.id}>{item.key}</li> ))} </ul> `

– H.Husain
Nov 25 '18 at 13:23

You can check my full code on this repo [ github.com/huzefahusain786/React-Redux ] Kindly help to finish this. I need a robust solution because I may have to use single JSON for multiple components.

– H.Husain
Nov 25 '18 at 13:26

|
show 4 more comments

change reducer to this:

{this.props.items.banner.map((item) => (

              <li key={item.id}>

                {item.id}

                {item.key}

                {item.image_url}

              </li>

            ))}

And change the PropTypes of items in ItemList.js

items: PropTypes.object.isRequired

I have tried the tutorial and created a working example here:
https://github.com/stackOverflow166/redux-nwb

Edit2:

Cannot read property 'map'

This is problem is about the date type.Add this to the ItemList.js to change the date type to array.Only array has the map function.

let bannerArray = 

let banner = this.props.items.banner

for (let key in banner){

     bannerArray.push(banner[key])

}

edited Nov 25 '18 at 10:07

answered Nov 24 '18 at 14:15

Root

1,563139

Hii, Thanks for making the example and replying to my question. I did as you suggested but i am still getting the mapping error. See below error info : TypeError: Cannot read property 'map' of undefined Warning: Failed prop type: Invalid prop items of type array supplied to ItemList, expected object. Note: I am using react version "react": "^16.6.1" Importing Proptype like this import PropTypes from 'prop-types';

– H.Husain
Nov 25 '18 at 7:27

I believe there is some problem with the latest version of react and redux, because your example works great with the old one. Can you please check with the latest version. Thanks in advance.

– H.Husain
Nov 25 '18 at 7:43

@user1328423 about the map error,I have changed my answer, and about the propTypes error, please share your code about PropTypes.So I can check it.

– Root
Nov 25 '18 at 10:11

Hello, Thanks for the reply. I just tried with the latest update given by you but it is still not working. Following is the code i have used in Itemlist.js constructor(props) { super(props); let bannerArray = ; let banner = this.props.items.banner for (let key in banner) { bannerArray.push(banner[key]); } this.state = { bannerArray }; } ` <ul> {this.state.bannerArray.map((item) => ( <li key={item.id}>{item.key}</li> ))} </ul> `

– H.Husain
Nov 25 '18 at 13:23

You can check my full code on this repo [ github.com/huzefahusain786/React-Redux ] Kindly help to finish this. I need a robust solution because I may have to use single JSON for multiple components.

– H.Husain
Nov 25 '18 at 13:26

|
show 4 more comments

change reducer to this:

{this.props.items.banner.map((item) => (

              <li key={item.id}>

                {item.id}

                {item.key}

                {item.image_url}

              </li>

            ))}

And change the PropTypes of items in ItemList.js

items: PropTypes.object.isRequired

I have tried the tutorial and created a working example here:
https://github.com/stackOverflow166/redux-nwb

Edit2:

Cannot read property 'map'

This is problem is about the date type.Add this to the ItemList.js to change the date type to array.Only array has the map function.

let bannerArray = 

let banner = this.props.items.banner

for (let key in banner){

     bannerArray.push(banner[key])

}

edited Nov 25 '18 at 10:07

answered Nov 24 '18 at 14:15

Root

1,563139

change reducer to this:

{this.props.items.banner.map((item) => (

              <li key={item.id}>

                {item.id}

                {item.key}

                {item.image_url}

              </li>

            ))}

And change the PropTypes of items in ItemList.js

items: PropTypes.object.isRequired

I have tried the tutorial and created a working example here:
https://github.com/stackOverflow166/redux-nwb

Edit2:

Cannot read property 'map'

This is problem is about the date type.Add this to the ItemList.js to change the date type to array.Only array has the map function.

let bannerArray = 

let banner = this.props.items.banner

for (let key in banner){

     bannerArray.push(banner[key])

}

edited Nov 25 '18 at 10:07

answered Nov 24 '18 at 14:15

Root

1,563139

edited Nov 25 '18 at 10:07

answered Nov 24 '18 at 14:15

Root

1,563139

answered Nov 24 '18 at 14:15

Root

1,563139

answered Nov 24 '18 at 14:15

Root

1,563139

Hii, Thanks for making the example and replying to my question. I did as you suggested but i am still getting the mapping error. See below error info : TypeError: Cannot read property 'map' of undefined Warning: Failed prop type: Invalid prop items of type array supplied to ItemList, expected object. Note: I am using react version "react": "^16.6.1" Importing Proptype like this import PropTypes from 'prop-types';

– H.Husain
Nov 25 '18 at 7:27

I believe there is some problem with the latest version of react and redux, because your example works great with the old one. Can you please check with the latest version. Thanks in advance.

– H.Husain
Nov 25 '18 at 7:43

@user1328423 about the map error,I have changed my answer, and about the propTypes error, please share your code about PropTypes.So I can check it.

– Root
Nov 25 '18 at 10:11

Hello, Thanks for the reply. I just tried with the latest update given by you but it is still not working. Following is the code i have used in Itemlist.js constructor(props) { super(props); let bannerArray = ; let banner = this.props.items.banner for (let key in banner) { bannerArray.push(banner[key]); } this.state = { bannerArray }; } ` <ul> {this.state.bannerArray.map((item) => ( <li key={item.id}>{item.key}</li> ))} </ul> `

– H.Husain
Nov 25 '18 at 13:23

You can check my full code on this repo [ github.com/huzefahusain786/React-Redux ] Kindly help to finish this. I need a robust solution because I may have to use single JSON for multiple components.

– H.Husain
Nov 25 '18 at 13:26

|
show 4 more comments

Hii, Thanks for making the example and replying to my question. I did as you suggested but i am still getting the mapping error. See below error info : TypeError: Cannot read property 'map' of undefined Warning: Failed prop type: Invalid prop items of type array supplied to ItemList, expected object. Note: I am using react version "react": "^16.6.1" Importing Proptype like this import PropTypes from 'prop-types';

– H.Husain
Nov 25 '18 at 7:27

I believe there is some problem with the latest version of react and redux, because your example works great with the old one. Can you please check with the latest version. Thanks in advance.

– H.Husain
Nov 25 '18 at 7:43

@user1328423 about the map error,I have changed my answer, and about the propTypes error, please share your code about PropTypes.So I can check it.

– Root
Nov 25 '18 at 10:11

Hello, Thanks for the reply. I just tried with the latest update given by you but it is still not working. Following is the code i have used in Itemlist.js constructor(props) { super(props); let bannerArray = ; let banner = this.props.items.banner for (let key in banner) { bannerArray.push(banner[key]); } this.state = { bannerArray }; } ` <ul> {this.state.bannerArray.map((item) => ( <li key={item.id}>{item.key}</li> ))} </ul> `

– H.Husain
Nov 25 '18 at 13:23

You can check my full code on this repo [ github.com/huzefahusain786/React-Redux ] Kindly help to finish this. I need a robust solution because I may have to use single JSON for multiple components.

– H.Husain
Nov 25 '18 at 13:26

Hii, Thanks for making the example and replying to my question. I did as you suggested but i am still getting the mapping error. See below error info : TypeError: Cannot read property 'map' of undefined Warning: Failed prop type: Invalid prop items of type array supplied to ItemList, expected object. Note: I am using react version "react": "^16.6.1" Importing Proptype like this import PropTypes from 'prop-types';

– H.Husain
Nov 25 '18 at 7:27

I believe there is some problem with the latest version of react and redux, because your example works great with the old one. Can you please check with the latest version. Thanks in advance.

– H.Husain
Nov 25 '18 at 7:43

@user1328423 about the map error,I have changed my answer, and about the propTypes error, please share your code about PropTypes.So I can check it.

– Root
Nov 25 '18 at 10:11

Hello, Thanks for the reply. I just tried with the latest update given by you but it is still not working. Following is the code i have used in Itemlist.js

constructor(props) {         super(props);         let bannerArray = ;         let banner = this.props.items.banner         for (let key in banner) {             bannerArray.push(banner[key]);         }         this.state = { bannerArray };     }

` <ul> {this.state.bannerArray.map((item) => ( <li key={item.id}>{item.key}</li> ))} </ul> `

– H.Husain
Nov 25 '18 at 13:23

Hello, Thanks for the reply. I just tried with the latest update given by you but it is still not working. Following is the code i have used in Itemlist.js

constructor(props) {         super(props);         let bannerArray = ;         let banner = this.props.items.banner         for (let key in banner) {             bannerArray.push(banner[key]);         }         this.state = { bannerArray };     }

` <ul> {this.state.bannerArray.map((item) => ( <li key={item.id}>{item.key}</li> ))} </ul> `

– H.Husain
Nov 25 '18 at 13:23

You can check my full code on this repo [ github.com/huzefahusain786/React-Redux ] Kindly help to finish this. I need a robust solution because I may have to use single JSON for multiple components.

– H.Husain
Nov 25 '18 at 13:26

|
show 4 more comments

draft saved

draft discarded

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.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Wsrtjtyk