javascript - How to map an object's keys to make JSON easier to handle in React - Stack Overflow

admin管理员组

文章数量:1278914

If I have this JSON:

{
    'name': 'Active user',
    'config': {
        'status': 'active',
    }
},
{
    'name': 'Paused user',
    'config': {
        'status': 'active',
    }
}

Then I can render a React ponent and access the data easily:

render: function() {
    var panels = [];

    this.props.accounts.forEach(function(account) {
        panels.push(
            <Tabs.Panel title={account.name}>
                <h2>{account.name}</h2>
            </Tabs.Panel>
        );
    });

    return (<Tabs>{panels}</Tabs>);
}
...
React.render(<Tabs accounts={ACCOUNTS} />, document.body);

If my JSON is structured as below instead, how should I re-factor the render function to work as I want?

{
    'Active User': {
        'config': {
            'status': 'active',
        }
    },
    'Paused User': {
        'config': {
            'status': 'paused',
        }
    }
}

i.e. I no longer have a name attribute to display.

If I have this JSON:

{
    'name': 'Active user',
    'config': {
        'status': 'active',
    }
},
{
    'name': 'Paused user',
    'config': {
        'status': 'active',
    }
}

Then I can render a React ponent and access the data easily:

render: function() {
    var panels = [];

    this.props.accounts.forEach(function(account) {
        panels.push(
            <Tabs.Panel title={account.name}>
                <h2>{account.name}</h2>
            </Tabs.Panel>
        );
    });

    return (<Tabs>{panels}</Tabs>);
}
...
React.render(<Tabs accounts={ACCOUNTS} />, document.body);

If my JSON is structured as below instead, how should I re-factor the render function to work as I want?

{
    'Active User': {
        'config': {
            'status': 'active',
        }
    },
    'Paused User': {
        'config': {
            'status': 'paused',
        }
    }
}

i.e. I no longer have a name attribute to display.

• javascript
• json
• reactjs

Share Improve this question Follow edited Oct 9, 2015 at 13:06 CherryFlavourPez asked Oct 9, 2015 at 11:27 CherryFlavourPezCherryFlavourPez 7,49766 gold badges4747 silver badges4848 bronze badges 3

• To those down voting, is it the vagueness of my question? I wasn't sure of the right way to describe the difference in the file structure. Any info would be much appreciated to improve the quality. – CherryFlavourPez Commented Oct 9, 2015 at 12:24
• stackoverflow./help/how-to-ask Did you Search and research before asking? – gontrollez Commented Oct 9, 2015 at 13:42
• I did: I found similar questions but nothing that actually explained what the problem was. You're right though, in hindsight I should have been able to use them to resolve my own issue. Still, mark it as a duplicate if you believe it's been covered elsewhere. – CherryFlavourPez Commented Oct 9, 2015 at 14:16

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

Is this what you want?

var users = {
    'Active User': {
        'config': {
            'status': 'active',
        }
    },
    'Paused User': {
        'config': {
            'status': 'paused',
        }
    }
};

var usersWithName = Object.keys(users).map(function(key) {
  var user = users[key];
  user.name = key;
  return user;
});

Where usersWithName = [{"config":{"status":"active"},"name":"Active User"},{"config":{"status":"paused"},"name":"Paused User"}]

本文标签： javascriptHow to map an object39s keys to make JSON easier to handle in ReactStack Overflow