I have a two dimensional array like this;

And I need to use a map function to display div elements as many as the length of the array.

I saved the state into localStorage to prevent the data from disappearing after refreshing the page.

const conditions = JSON.parse(localStorage.getItem("condition")).map((condition, index) => {
            return <div key={index} className="card bg-color-primary" style={{ height: "170px", width: "300px", borderColor: "#1E90FF", backgroundColor: "white", borderWidth: "2px" }}>
                    {_.isEmpty(this.state.rule.condition) ?
                        <div className="card-content" style={{ color: "black" }}>
                            <span className="card-title">New Condition</span>
                            <p>Click to edit</p>
                        </div> :
                        <div className="card-content" style={{ color: "black" }}>
                            <span className="card-title">{condition.property}</span>
                            <p>{condition.operator + " " + condition.value}</p>
                        </div>}
                    <div className="card-action">
                        <a href="javascript:;" style={{ color: "red" }}>OR</a>
                        <a href="javascript:;" style={{ color: "black" }}>AND</a>
                        <a onClick={this.handleOpen} style={{ color: "gray", cursor: "pointer" }}>EDIT</a>
                    </div>
                </div>
        });

After this scope of code, it throws an error like;

Uncaught TypeError: localStorage.getItem(...).map is not a function

NOTE: I already have JSON.parse but forgot to add it here so it is not the actual problem. My bad.

I have a two dimensional array like this;

And I need to use a map function to display div elements as many as the length of the array.

I saved the state into localStorage to prevent the data from disappearing after refreshing the page.

const conditions = JSON.parse(localStorage.getItem("condition")).map((condition, index) => {
            return <div key={index} className="card bg-color-primary" style={{ height: "170px", width: "300px", borderColor: "#1E90FF", backgroundColor: "white", borderWidth: "2px" }}>
                    {_.isEmpty(this.state.rule.condition) ?
                        <div className="card-content" style={{ color: "black" }}>
                            <span className="card-title">New Condition</span>
                            <p>Click to edit</p>
                        </div> :
                        <div className="card-content" style={{ color: "black" }}>
                            <span className="card-title">{condition.property}</span>
                            <p>{condition.operator + " " + condition.value}</p>
                        </div>}
                    <div className="card-action">
                        <a href="javascript:;" style={{ color: "red" }}>OR</a>
                        <a href="javascript:;" style={{ color: "black" }}>AND</a>
                        <a onClick={this.handleOpen} style={{ color: "gray", cursor: "pointer" }}>EDIT</a>
                    </div>
                </div>
        });

After this scope of code, it throws an error like;

Uncaught TypeError: localStorage.getItem(...).map is not a function

NOTE: I already have JSON.parse but forgot to add it here so it is not the actual problem. My bad.

• javascript
• arrays
• reactjs

Share Improve this question Follow edited Aug 9, 2017 at 7:18 Burak ULU asked Aug 9, 2017 at 7:13 Burak ULUBurak ULU 30311 gold badge66 silver badges1818 bronze badges 3

• 1 localStorage.getItem("condition") doesn't return an array. – Chris Commented Aug 9, 2017 at 7:14
• 2 data is not 2D array, it's object that contains key value pair and those key is having the array so specify on which property you want to run the map. – Mayank Shukla Commented Aug 9, 2017 at 7:23
• possible cache or not piled? – Endless Commented Aug 9, 2017 at 7:28

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

Data that you stored in localStorage is not a 2D array, it's an object having keys name, operator, property, value. To use map, data should be an array. Specify on which (field) array you want to run the map.

Also important part is, localStorage will return the stringified value, so you need to parse the it first.

Example- running map of name value:

JSON.parse(localStorage.getItem("condition")).name.map(.....)

Or if you want to run map on object then first use Object.keys() (return an array of all the keys) or Object.values (return array of all the values) to get the array first then run map on that.

Check this snippet:

let obj = {
   a: [1,2,3],
   b: [4,5,6]
}

Object.keys(obj).map(el => {
   console.log('key', el);
   obj[el].map(sub_el => console.log(sub_el));
})