Redux: display single record but json is an array

Question

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      
      }
    ]
  ]

you want something like people: [ {}, {}, {} ]? or just get the object from there? — user1399844
– user1399844, Commented Apr 5, 2017 at 9:46
I already have "people" (and that works on a list page) but for the single record, I just want "person". But I can get it to work by taking the 0 index of people, I'm fine with that too. It just doesn't seem as clean or logical. — JohnKNL
– JohnKNL, Commented Apr 5, 2017 at 9:48
check my answer, I think make sense to write an util function to parse the "people" — user1399844
– user1399844, Commented Apr 5, 2017 at 9:51

Mayank Shukla · Accepted Answer · 2017-04-05 08:29:27Z

2

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

answered Apr 5, 2017 at 8:29

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

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

1 Comment

JohnKNL Over a year ago

yes, still have the issue. I'm afraid neither answer is helping. This is my raw redux state:

Grand Julivan · Accepted Answer · 2017-04-05 09:09:07Z

0

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

answered Apr 5, 2017 at 9:09

Grand Julivan

2791 gold badge2 silver badges13 bronze badges

1 Comment

JohnKNL Over a year ago

looks logical, but gives me a blank page.

user1399844 · Accepted Answer · 2017-04-05 09:50:42Z

0

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.

answered Apr 5, 2017 at 9:50

user1399844

Comments

Jhim · Accepted Answer · 2017-04-05 09:56:48Z

0

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.

answered Apr 5, 2017 at 9:56

Jhim

448 bronze badges

2 Comments

JohnKNL Over a year ago

sorry, I get a blank page with this error in the console:Uncaught TypeError: Cannot read property 'Name' of null

Jhim Over a year ago

in that case you need to add validation on the return, since if that is the error.. your 1st render is empty yet... to correct that you need to include return item.Name?item.Name:''; instead of just return item.Name which should also be applied to PersonID..

JohnKNL · Accepted Answer · 2017-04-05 18:03:31Z

0

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.

answered Apr 5, 2017 at 18:03

JohnKNL

11 bronze badge

Collectives™ on Stack Overflow

Redux: display single record but json is an array

5 Answers 5

1 Comment

1 Comment

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

1 Comment

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related