I have a JSON object with the following content:

[{
    "type": "pdf",
    "size": "1mb",
    "date": "392017",
    .....500 more key value pairs like this
}]

This is how I am displaying my above JSON object on the screen in React Native.

export const MyComponent = ({myJson}) => {
    const data = Object.entries(myJson).map(([key, value], i) => {
        if (value !== '' && value !== null) {
            return (
                <View style={styles.body} key={i}>
                    <Text style={styles.labels}>{key}</Text>
                    <Text style={styles.values}>{value}</Text>
                </View>
            );
        }
    });

    return (
        <View>
            {data}
        </View>
    );
};

I want to change the keys so it would bee:

[{
    "File Type": "pdf",
    "File Size": "1mb",
    "Date Is": "392017",
    .....500 more key value pairs like this
}]

How would I do that in React?

Thanks!

I have a JSON object with the following content:

[{
    "type": "pdf",
    "size": "1mb",
    "date": "392017",
    .....500 more key value pairs like this
}]

This is how I am displaying my above JSON object on the screen in React Native.

export const MyComponent = ({myJson}) => {
    const data = Object.entries(myJson).map(([key, value], i) => {
        if (value !== '' && value !== null) {
            return (
                <View style={styles.body} key={i}>
                    <Text style={styles.labels}>{key}</Text>
                    <Text style={styles.values}>{value}</Text>
                </View>
            );
        }
    });

    return (
        <View>
            {data}
        </View>
    );
};

I want to change the keys so it would bee:

[{
    "File Type": "pdf",
    "File Size": "1mb",
    "Date Is": "392017",
    .....500 more key value pairs like this
}]

How would I do that in React?

Thanks!

• javascript
• json
• loops
• reactjs
• react-native

Share Improve this question Follow edited Mar 10, 2017 at 4:25 Testaccount asked Mar 10, 2017 at 3:45 TestaccountTestaccount 2,91133 gold badges2424 silver badges2828 bronze badges 1

• You would likely provide a map of old name to new, then simply assign the old property to a new property with the new name, either in a new object or in the old one then delete the old property. What have you tried? – RobG Commented Mar 10, 2017 at 3:48

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

Object.keys(yourObject).forEach((key)=>{ //this will return array of keys

   yourObject[newKey] = yourObject[key]; //saving reference in your new key.
   delete yourObject[key]; //deleting old key;

});

You will need to map you old keys with new ones, and then in loop you and easily change this.

Assuming that the var array is your JSON array and newArray is the array that you want get here is a code that can help you.

var array = [{
    "type": "pdf",
    "size": "1mb",
    "date": "392017",
    .....500 more key value pairs like this
}]

var newArray = [];

newArray = array.map(function(item){
    return {
        "File Type": item.type,
        "File Size": item.size,
        "Date is": item.date
    }
})

The map method will transform every item in the array and result for another array.

Create a name map of oldName:newName and use it to map to an object with the new property names, e.g.

var data = [{
    "type": "pdf",
    "size": "1mb",
    "date": "392017"
}];

var nameMap = {type:'File Type',
               size:'File Size',
               date:'Date Is'
};

var renamed = [Object.keys(data[0]).reduce(
  (acc, key) => {
    acc[nameMap[key]] = data[0][key];
    return acc;
  }, {})];
  
console.log(renamed);