React.JS - handle the null/undefined case while displaying the JSON object as key and values

Question

I have the below code which executes all keys and values of the nested JSON. Its working fine but whenever the value is null for any key, the code breaks at reduce function. I would like to display the null value as well.I tried to handle null and undefined scenario in else if but that is not working. Below is the code I have written.It must be a minor change which I am missing out.

  const myObj = {
      "key1": "value1",
      "key2": null,
      "key3": "value3",
      "key4": {
        "k1": "val1",
        "k2": {
          "p1": "v1",
          "p2": "v2",
          "p3": "v3"
        }
      }
    }


class Details extends React.component{
constructor(){
  this.getValues = this.getValues.bind(this);
}
getValues() {
     return (
        <div key={k} className="row">
            <div className="col-xs-6">{k}</div>
            <div className="col-xs-6">{v}</div>
        </div>
    )
    }

generateData(myObj) {

        const newData = Object.keys(myObj).reduce((result, currentKey) => {
          if (typeof myObj[currentKey] === 'string' || myObj[currentKey] instanceof String) {
            const elementToPush = getValues(currentKey, myObj[currentKey]);
            result.push(elementToPush);
          } else {
            const nested = generateData(myObj[currentKey]);
            result.push(...nested);
          }
          return result;
        }, []);
        return newData;
      }

render() {
    return (
        <div>
            <Header />
            <div className="content">
                {this.generateData(myObj)}
            </div>
        </div>
    )
}
}

More specifically, it says so at Object.keys(...), because you are calling generateData with null. — kLabz
– kLabz, Commented Jan 11, 2018 at 6:40
when the value is null it throws this error at Object.keys(myObj).reduce() line in generateData() — user2138675
– user2138675, Commented Jan 11, 2018 at 6:41

Aswin Ramesh · Accepted Answer · 2018-01-11 07:14:18Z

1

Is this what you are expecting?

 const newData = Object.keys(myObj).reduce((result, currentKey) => {
          if (typeof myObj[currentKey] === 'string' || myObj[currentKey] instanceof String) {
            const elementToPush = getValues(currentKey, myObj[currentKey]);
            result.push(elementToPush);
          } else if(!myObj[currentKey]) {
            const nullElementToPush = getValues(currentKey, "null");
            result.push(nullElementToPush);
          } else {
            const nested = generateData(myObj[currentKey]);
            result.push(...nested);
          }
          return result;
}, []);

edited Jan 11, 2018 at 7:14

answered Jan 11, 2018 at 6:40

Aswin Ramesh

1,6741 gold badge13 silver badges13 bronze badges

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

5 Comments

user2138675 Over a year ago

This does not work. It's breaking the key characters and displaying it along with the index.

Aswin Ramesh Over a year ago

do you wish to avoid the null from displaying, means skip those keys which is null

user2138675 Over a year ago

I actually want to display null as a value.

Aswin Ramesh Over a year ago

In the above code it will check !myObj[currentKey], means null or undefined,you can also use (myObj[currentKey] === null || myObj[currentKey] === undefined), then it will use your getValues function to render the key and the value. If you wish to render the null as empty. then you can give "" instead of "null".

user2138675 Over a year ago

Yeah,i did the same thing.Its working now. Thank you for the solution.Much appreciated.

Collectives™ on Stack Overflow

React.JS - handle the null/undefined case while displaying the JSON object as key and values

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related