Getting json object data with react

Question

I am attempting to pull data out of json like this, which is imported as "values"

{
  "content": {
      "person": [
        {
          "name": "Test"
          "age" : "24:
        }
    ]
 }
}

I am using .map like below but getting the error .default.map is not a function I believe it is because i have objects not arrays, i've tried a bunch of stuff including object.keys but i'm getting errors all over the place, any direction would be appreciated.

import values from './sample.json'

const vals = values.map((myval, index) => {
    const items = person.items.map((item, i) => {

        return (
            <div>{item.name}</div>
        )
    })

    return (
        <div>{items}</div>
    )
})

Solution

I think your data and code have some errors. But after fixing those and also changing the name from 'person' to 'people' if that's what you are after, here's the code that does what you are trying to do:

var data = {
    content: {
        people: [
            {
                name: "Test",
                age: 24,
            },
            {
                name: "Foo",
                age: 25,
            },
        ],
    },
};

var App = React.createClass({
    render: function () {
        var people = data.content.people.map(function (person) {
            return <div>{person.name}</div>;
        });

        return <div>{people}</div>;
    },
});

ReactDOM.render(<App />, document.getElementById("app"));

And here's the JSBin for that: https://jsbin.com/coyalec/2/edit?html,js,output

Update: I'm updating the answer with more detailed example. It now deals with data more generically, like it doesn't assume what are the entries of 'contents' and such, but it knows that each type like 'people' or 'pets' are an array.

var data = {
    content: {
        people: [
            {
                name: "Test",
                age: 24,
            },
            {
                name: "Foo",
                age: 25,
            },
        ],
        pets: [
            {
                name: "Sweety",
                age: 3,
            },
            {
                name: "Kitty",
                age: 5,
            },
        ],
    },
};

var App = React.createClass({
    render: function () {
        // Get the keys in data.content. This will return ['people', 'pets']
        var contentKeys = Object.keys(data.content);

        // Now start iterating through these keys and use those keys to
        // retrieve the underlying arrays and then extract the name field
        var allNames = contentKeys.map((t) =>
            data.content[t].map((e) => <div>{e.name}</div>)
        );

        return <div>{allNames}</div>;
    },
});

ReactDOM.render(<App />, document.getElementById("app"));

And here's the latest JSBin: https://jsbin.com/coyalec/4/edit?html,js,output

Comments

[azium]

Also, what is myval ?

[Ash]

Ahh sorry! Values is the imported json file. and myval was a typo, it's "person". I've updated to reflect that.

[zerkms]

values is not an array, so, what values.map is supposed to mean then?

[KumarM]

@Ash did my answer below work for you?

[Ash]

@KumarM yes thank you, sorry for delay in checking it out, it was perfect your extended example was also very helpful!