CODEWITHSUNDEEP
jsonreactjsredux
JohnKNL
JohnKNL

Reputation: 1

Redux: display single record but json is an array

My react-redux app is getting a single record in JSON but the record is an array and therefore it looks like this (notice [ ] brackets):

{"person":[{"PersonID":1,"Name":"John Smith","Gender":0}]}

So, the redux store shows it as person->0->{"PersonID":1,"Name":"John Smith","Gender":0}. As such, the state shows that the person object is empty:

Name: this.props.person?this.props.person.Name:'object is empty',

My PersonPage.js includes the details page like this:

<PersonDetail person={this.props.person} />

The details page has this:

import React from 'react';
import classnames from 'classnames';

class PersonDetail extends React.Component {
   state = {
        Name: this.props.person?this.props.person.Name:'',
        PersonID: this.props.person?this.props.person.PersonID:null,
        loading: false,
        done: false
    }


 componentWillReceiveProps = (nextProps) => {
      this.setState({
        PersonID: nextProps.person.PersonID,
        Name: nextProps.person.Name

      });
  }

This is my raw Redux state:

people: [
    [
      {
        PersonID: 51,
        Name: 'John Smith',
        Gender: 0      
      }
    ]
  ]

Upvotes: 0

Views: 700

Answers (5)

JohnKNL
JohnKNL

Reputation: 1

I fixed it! It was a combination of two of the answers given: In the PersonPage.js, I had to call the PersonDetails object like this:

<PersonDetail
            person={this.props.person[0]}           
          />

And this is the new MapStatetoProps:

function mapStateToProps(state, props) {
  const { match } = props;
   if (match.params.PersonID) {    
         return {   
     person: state.people
    }    
 }

Thanks to those who answered. This drove me nuts.

Upvotes: 0

Jhim
Jhim

Reputation: 44

you have an array on your person data... you can only access that without the 0 using map...

example:

componentWillReceiveProps = (nextProps) => {
  var PersonID = nextProps.person ? nextProps.person.map(item => { return item.PersonID}) : ''; 
  var Name = nextProps.person ? nextProps.person.map(item => { return item.Name}) : ''; 

this.setState({
    PersonID,
    Name
  });

}

this is considering you only have 1 array on person.

Upvotes: 0

user1399844
user1399844

Reputation:

If I was you I would make an util function like this:

const parsePeople = people => {

  if (people instanceof Array) return parsePeople(people.pop())

  return people

}


const people = [
  [{
    PersonID: 51,
    Name: 'John Smith',
    Gender: 0      
  }]
]


const person = parsePeople(people)

console.log(person) -> Object

Using recursion we check if people is an instance of Array, we call the function again using people.pop() which return the last element of the array.

Upvotes: 0

Grand Julivan
Grand Julivan

Reputation: 279

I think that you are supposed to map the person detail foreach person's data.

on the PersonPage.js ,

map it as follows:

{
    this.props.person.map((p)=>{
    return (<PersonDetail person={p} />)
    })
}

Upvotes: 0

Mayank Shukla
Mayank Shukla

Reputation: 104479

Person is an array, that contains the object in which Name key is present, so you need to use index also, write it like this:

this.props.person && this.props.person.length ? this.props.person[0].Name : '';

Check this example:

var data = {
      "person":[
                 {
                    "PersonID":1,
                    "Name":"John Smith",
                    "Gender":0
                  }
              ]
};

console.log('Name: ', data.person[0].Name);

Upvotes: 2

Related Questions