CODEWITHSUNDEEP
jsonreactjsobjectkey
Fine
Fine

Reputation: 47

React: How can I map nested JSON Objects without key name

I have a JSON file without a key for the id-values of every object inside. I do not know how to access every single value without the key-name for the id´s.

How can I add a key-name to these values in react? Or is there another way to access them? The first 5 chars of the id are always the same.

example.json:

{
    "-KxhTabcdefgh": {
        "name": "Alpha",
        "description": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.",
        "logo": "http://www.example.com/img/08f6.png",
        "location": {
            "lat": 53.5,
            "long": 10.0
        }
    },
    "-KxhTstuvwxyz": {
        "name": "Beta",
        "description": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.",
        "logo": "http://www.example.com/img/f782.png",
        "location": {
            "lat": 53.0,
            "long": 10.0
        }
    },
}

app.js:

import React, { Component } from 'react'
import './index.css'
import Example from '../src/components/example/example'
import data from './example.json';


class App extends Component {
  constructor(props)
  {
    super(props);
    this.state={
      data:[data]

    }
  };

render() {


    return (
        <div className = "App">
        {this.state.data.map((exam, index) => {
          return <Example 
                    name={exam.name} 
                    logo={exam.logo} 
                    description={exam.description}/>
        })}        
        </div>
    );
  }
}

console.log(data)
export default App;

Upvotes: 1

Views: 2021

Answers (1)

Tholle
Tholle

Reputation: 112917

You can use Object.keys to get an array with all the keys in the object, and then map over the keys.

Example

const data = {
  "-KxhTabcdefgh": {
    name: "Alpha",
    description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.",
    logo: "http://www.example.com/img/08f6.png",
    location: {
      lat: 53.5,
      long: 10.0
    }
  },
  "-KxhTstuvwxyz": {
    name: "Beta",
    description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.",
    logo: "http://www.example.com/img/f782.png",
    location: {
      lat: 53.0,
      long: 10.0
    }
  }
};

class App extends React.Component {
  state = {
    data
  };

  render() {
    const { data } = this.state;

    return (
      <div>
        {Object.keys(data).map(key => {
          const exam = data[key];
          return (
            <div key={key}>
              <div>{exam.name}</div>
              <div>{exam.logo}</div>
              <div>{exam.description}</div>
            </div>
          );
        })}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Upvotes: 2

Related Questions