ReactJs - Convert JSON Data using loadash

Hello,

Finally now I am going to post few blogs on React and ReactJs. In this blog we are going to learn how we can modify, manipulate or edit JSON data received from API according to your need.

This will be very useful when your backend developer refused to change API response. So not to worry, let it be as it is and convert data on your side before you use it.

For this we are going to use Lodash library, so first of all add it your ReactJs project using npm and import it in your class file.

import _ from "lodash";

Now create function for converting data.

const convertData = (data, key) =>{

  let result = _.chain(data)

    .get(key)

    .map(d => ({

      modified_key1: _.get(d, "original_key1"),

      modified_key2: _.get(d, "original_key2"),

      modified_key3: _.get(d, "original_key3"),

      modified_key4: _.get(d, "original_key4")

    }))

    .value();

    return result;

}

Now call this function in your API response.

let modifiedData = convertData(response.body, "data");

Here data is the root key of your JSON response. Change it according to your JSON response. That's it now you have modified data according to your requirements.