How to map object in React

Question

I have an JSON object that I am trying to map. SO basically the JSON is like this:

{
  "Status": true, 
  "discounts": {
    "broker": {
      "discount": "1"
    }, 
    "dealer": {
      "discount": "0.7"
    }, 
    "individual": {
      "number_of_cars_discount": {
        "1": "1", 
        "10": "1", 
        "2": "0.98", 
        "3": "1", 
        "4": "1", 
      }
    }
  }
}

So I set the post and fetch the data.

const [posts, setPosts] = useState({});

  useEffect(() => {
    const fetchPosts = async () => {
      try {
        setLoading(true);
        const res = await Axios({
        });
        if (res.status == 200) {
          setPosts(res.data);
        }
        setLoading(false);
      } catch (err) {
        setError(err.message);
        setLoading(false);
      }
    };
    fetchPosts();
  }, []);

So to get the value and display it inside the table here is my code:

<tbody>
                    <td>
                  {Object.keys(posts).map((post, index) => (
                    <tr>
                      <div key={`broker-${index}`}>{post.discounts}</div>
                    </tr>
                  ))}
                </td>
                  </tbody>

But unfortunately, I am getting nothing. Thanks for your helps...

score 1 · Answer 1 · answered Jun 20 '21 at 18:06

1

Initialize posts with empty array not boolean value:

const [posts, setPosts] = useState([]);

And you have to map on posts directly. So, you don't need to use Object.keys().

answered Jun 20 '21 at 18:06

Bhojendra Rauniyar

83,432
35
168
231

I actually set it like this const [posts, setPosts] = useState({}); but could you please explain the second thing? – Jun 20 '21 at 18:10
Because I am getting Cannot convert undefined or null to object if I do like this {Object.keys().map((key) => (
{posts.discounts.broker[key]}
))} – Jun 20 '21 at 18:10

score 0 · Answer 2 · answered Jun 20 '21 at 19:56

0

You can keep posts as an empty Object when you do useState().

The nested JSON object that you have doesn't work with those cycling you are trying. If you console.log the key in your arrow function inside the map you would discover that it would be changing value between "Status" and "discounts", so with those keys you cannot access the object inside posts.discounts.broker because those properties don't exist.

posts.discounts.broker.Status and posts.discounts.broker.discounts will always return undefined.

I think you should consider whether you should flatten your nested JSON or, if you just need what's inside discounts.broker, then you can set just that Object inside of posts.

answered Jun 20 '21 at 19:56

Lucayam

1
1
2

You mean I use set diffetent useState for each dealer, individual etc? – Jun 20 '21 at 20:01
So, do you need to use those other `discounts` properties? – Lucayam Jun 20 '21 at 20:04
Yes I do for all of them – Jun 20 '21 at 20:13
1

I guess your only way here to not overcomplicate the rendering, since you know the properties you need, is to, as you asked, save every "`sub-object`" in a separate variable. So you will have: `const [broker, setBroker] = useState({})` Same thing for `individual` and `dealer`. Once you fill them, then you can render them by accessing the properties directly. For `individual` you can cycle through the `Object` by accessing the property `number_of_cars_discounts` and do an `Object.keys(individual.number_of_cars_discounts)`, so you can retrieve every value inside that object too – Lucayam Jun 20 '21 at 20:26

How to map object in React

2 Answers2