ReactJS access JSON object passed from other component

Question

I'm new with ReactJs and have this question which right now I find it a bit hard to understand.

I have a component which does a call to retrieve XML object, this XML object is later parsed to JSON object and after passed to other component in order to do some sorting to it. Right now i'm stuck and unable to access properly the JSON on my second component.

And when I'm trying to do this.props.files.map - it says that map is undefined.

this is the parent component render method where I pass the properties:

render() {
    return (
        <div>

            <List files={this.convertToJson()}/>

        </div>
    )
}

the JSON that I receive looks like this:

[ {
"$": {
  "date": "",
  "description": "",
  "name": "",
  "size": "107829",
  "type": "pdf"
}
}, {
"$": {
  "date": "",
  "description": "",
  "name": "",
  "size": "682015",
  "type": "pdf"
  }
}
]

How should I write my second component to get access to this JSON data and later show all properties, i would like to iterate over it and have access to all properties.

this.props.files.map(function($) {
          return <li key={$}>{$}</li>
        })

this gives me an error with files.map is undefined.

i'm pretty new with this so all help would be useful.

here is the code for this.convertToJson() as requested, if I console log it - it looks like the JSON above.

convertToJson = () => {
return JSON.stringify(this.state.data)

Before map through files, try to console.log and check whether files is undefined or not. — Hemerson Carlin
– Hemerson Carlin, Commented Oct 3, 2017 at 14:57
In addition to @mersocarlin try to console.log( typeof this.props.files ) in order to see whether files is actually an array. If it's not, map will not work. — Nocebo
– Nocebo, Commented Oct 3, 2017 at 14:59
You may also need to use defaultProps in your second component to set this.props.files default to an empty array. — Chase DeAnda
– Chase DeAnda, Commented Oct 3, 2017 at 15:00
@Chase this.convertToJson() does this: return JSON.stringify(this.state.data) — rivar_
– rivar_, Commented Oct 10, 2017 at 9:24

Kalob Porter · Accepted Answer · 2017-10-03 19:42:47Z

1

I think the issue might actually be with this.convertToJson()

You need to parse the JSON object into a Javascript object in order to iterate over it in the way you are suggesting.

Check out this example it seems to work correctly.

// This is just mocking your JSON object
const json = JSON.stringify([{
"$": {
  "date": "",
  "description": "",
  "name": "",
  "size": "107829",
  "type": "pdf"
}
}, {
"$": {
  "date": "",
  "description": "",
  "name": "",
  "size": "682015",
  "type": "pdf"
  }
}
]);
// This is what you care about
const obj = JSON.parse(json);

obj.map(o => {
// You need to get o.$ to get the actual object
	console.log(o.$)
});

also in order to pass a component all of the objects properties as props you'll probably need the spread operator <li {...o.$}>{$}</li>

Hope this helps

answered Oct 3, 2017 at 19:42

Kalob Porter

4403 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

rivar_ Over a year ago

when I try to use your code in mine i get this error: obj.map is not a function. I'm doing this cont json = JSON.stringify(this.state.data) and later using your way. If i console log json at this state - it prints all entire object, if i try to console.log it after i parse it i get infinite [object object]

Kalob Porter Over a year ago

JSON.stringify was just mocking the JSON, you don't need to stringify JSON code, just parse it. If you don't need to make it JSON just try to use .map on this.site.data

rivar_ Over a year ago

the point is that its not a JSON at the start, its XML which i received. someone told me to stringify it to make it JSON and then parse it but it not working.

Collectives™ on Stack Overflow

ReactJS access JSON object passed from other component

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related