Navigate back to the homepage

How to map json data with array in react native

Infinitbility
React Native
August 17th, 2021 · 1 min read
How to map json data with array in react native

Hello Friends 👋,

Welcome To Infinitbility! ❤️

This tutorial help to change structure of your json to array, many times we get unstructured data from api response then we have to do re structure data in react native.

Today, we are going to learn how we can change schema of json data and also how we can convert json data to array.

First start from, how we can change json key name in react native.

Suppose, You have json data with key name id, and name but you want to change id => key and name => label.

Let’s see how we can do that…

Coming JSON from something like,

1[
2 {
3 "id": 1,
4 "name": "Hotels",
5 },
6 {
7 "id": 2,
8 "name": "Embassies",
9 },
10 ]

But, you want to change key name like below

1[
2 {
3 key: 1,
4 label: "Hotels",
5 },
6 {
7 key 2,
8 label: "Embassies",
9 },
10 ]

Convert JSON key example

1var jsonData = [
2 { "id": 1, "name": "Hotels" },
3 { "id": 2, "name": "Embassies" }
4 ];
5
6var data = jsonData.map(function(item) {
7 return {
8 key: item.id,
9 label: item.name
10 };
11});
12
13console.log(data);

console.log(data); should so your desired output, using above example map we are understand how we can change json to our wanted structure also…

Thanks For Reading…

Join our email list and get notified about new content

No worries, I respect your privacy and I will never abuse your email.

Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.

Looking For React Native Tutorial?

we are trying to create the best Tutorial for react native developers.

When you want a daily updates about React Native Tutorial or infinitbility update subscribe to our newsletter.

Read React Native Tutorial

Request New Tutorial or Article on mail [email protected]

Tutorials

React Native

Categories

More articles from Infinitbility

Password TextInput in react native

Password TextInput in react native

React Native Password TextInput Example

August 16th, 2021 · 1 min read
How to justify text in react native

How to justify text in react native

React Native Text Align Justify Example

August 15th, 2021 · 1 min read
© 2020–2021 Infinitbility
About
Link to $https://medium.com/infinitbilityLink to $https://www.facebook.com/InfinitbilityLink to $https://github.com/infinitbilityLink to $https://twitter.com/infinitbilityLink to $https://www.buymeacoffee.com/infinitbilityLink to $mailto:[email protected]