JSON response parsing in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

Displaying parsed JSON data in a list

You receive this JSON response from a server:

{"users": [{"id": 1, "name": "Alice"}, {"id": 2, "name": "Bob"}]}

Which React Native code snippet correctly parses this JSON and displays the user names in a FlatList?

React Native

const jsonResponse = '{"users": [{"id": 1, "name": "Alice"}, {"id": 2, "name": "Bob"}]}';

// Which snippet correctly parses and displays the names?

A

const data = JSON.stringify(jsonResponse);
<FlatList data={data.users} keyExtractor={item => item.id.toString()} renderItem={({item}) => <Text>{item.name}</Text>} />

B

const data = JSON.parse(jsonResponse.users);
<FlatList data={data} keyExtractor={item => item.id.toString()} renderItem={({item}) => <Text>{item.name}</Text>} />

C

const data = JSON.parse(jsonResponse);
<FlatList data={data.users} keyExtractor={item => item.id.toString()} renderItem={({item}) => <Text>{item.name}</Text>} />

D

const data = JSON.parse(jsonResponse);
<FlatList data={data} keyExtractor={item => item.id.toString()} renderItem={({item}) => <Text>{item.name}</Text>} />

💡 Hint

Remember to use JSON.parse to convert the JSON string into an object before accessing its properties.

Option C correctly parses the JSON string into an object, then accesses the 'users' array to pass as data to FlatList. Option C wrongly uses JSON.stringify which converts an object to a string. Option C passes the whole parsed object instead of the users array. Option C tries to parse jsonResponse.users which is undefined because jsonResponse is a string.

📝 Syntax

intermediate

Correct JSON parsing syntax

Which option correctly parses a JSON string stored in variable response and accesses the title property of the first item in the posts array?

React Native

const response = '{"posts": [{"id": 1, "title": "Hello"}, {"id": 2, "title": "World"}]}';

A

const data = JSON.parse(response.posts);
const title = data[0].title;

B

const data = JSON.stringify(response);
const title = data.posts[0].title;

C

const data = JSON.parse(response);
const title = data[0].posts.title;

D

const data = JSON.parse(response);
const title = data.posts[0].title;

💡 Hint

Use JSON.parse on the whole JSON string before accessing nested properties.

Option D correctly parses the JSON string and accesses the first post's title. Option D uses JSON.stringify which converts an object to a string, so data.posts is undefined. Option D tries to parse response.posts which is undefined because response is a string. Option D tries to access data[0] which is undefined because data is an object with a posts array.

🔧 Debug

advanced

Fixing runtime error when parsing JSON

You have this code snippet:

const response = '{"items": [{"id": 1, "value": 10}, {"id": 2, "value": 20}]}';
const data = JSON.parse(response);
console.log(data.items.length);

But it throws an error: TypeError: Cannot read property 'length' of undefined. What is the most likely cause?

A The variable <code>response</code> is not a string but already an object, so parsing it again causes error.

B The code is correct and should not throw an error; the error must be from elsewhere.

C The JSON string is correct but the property <code>items</code> does not exist in the parsed object.

D The JSON string is malformed and JSON.parse fails silently returning undefined.

💡 Hint

Check the type of the variable before parsing it again.

If response is already an object, calling JSON.parse on it throws an error or returns undefined. This causes data.items to be undefined, so accessing length fails. The JSON string shown is correct, so A and C are unlikely. B is incorrect because the error message points to this code.

🧠 Conceptual

advanced

Understanding asynchronous JSON fetching

In React Native, you fetch JSON data from a server using fetch. Which code snippet correctly parses the JSON response and updates state with the data?

React Native

fetch('https://example.com/data')
  .then(response => ???)
  .then(data => setData(data))
  .catch(error => console.error(error));

A response.json()

B JSON.parse(response)

C response.text()

D JSON.stringify(response)

💡 Hint

The fetch response object has a method to parse JSON directly.

The fetch API response object has a .json() method that returns a promise resolving to the parsed JSON. JSON.parse expects a string, but response is a Response object, so B is wrong. A returns raw text, not parsed JSON. D converts an object to a string, not parsing.

❓ navigation

expert

Passing parsed JSON data between screens

You parsed JSON data in Screen A and want to pass the array items to Screen B using React Navigation. Which code snippet correctly passes and accesses the data?

React Native

// In Screen A:
navigation.navigate('ScreenB', { items: parsedData.items });

// In Screen B:
const items = ???;

A const items = navigation.getParam('items');

B const items = route.params.items;

C const items = props.navigation.state.params.items;

D const items = navigation.params.items;

💡 Hint

In React Navigation v5 and later, route.params contains passed parameters.

Option B uses route.params which is the correct way to access passed parameters in functional components with React Navigation v5+. Option B is deprecated from older versions. Option B uses props.navigation.state.params which is outdated and may not work. Option B is invalid syntax.

Practice

1. What does response.json() do in React Native when fetching data?

easy

A. It displays the JSON data on the screen.

B. It sends data back to the server.

C. It converts the server response into a JavaScript object.

D. It stops the fetch request.

Solution

1. Step 1: Understand the fetch response

   The fetch API returns a response object that contains the raw data from the server.

2. Step 2: Use response.json() to parse data

   The response.json() method reads the raw response and converts it into a usable JavaScript object.

3. Final Answer:

   It converts the server response into a JavaScript object. -> Option C

4. Quick Check:

   response.json() = parse JSON [OK]

Hint: Remember: response.json() parses JSON to object [OK]

Common Mistakes:

• Thinking response.json() sends data to server
• Assuming response.json() displays data directly
• Confusing response.json() with stopping fetch

2. Which of the following is the correct syntax to fetch and parse JSON data in React Native?

easy

A. fetch(url).then(response => response.json())

B. fetch(url).then(response => response.text())

C. fetch(url).json()

D. fetch(url).parseJSON()

Solution

1. Step 1: Recall fetch syntax

   The fetch function returns a promise with a response object.

2. Step 2: Use response.json() to parse JSON

   The correct method to parse JSON from the response is response.json(), which returns a promise with the parsed object.

3. Final Answer:

   fetch(url).then(response => response.json()) -> Option A

4. Quick Check:

   Correct fetch JSON syntax = fetch(url).then(response => response.json()) [OK]

Hint: Use response.json() after fetch to parse JSON [OK]

Common Mistakes:

• Using response.text() instead of response.json()
• Calling json() directly on fetch without then
• Using non-existent parseJSON() method

3. Given the code snippet:

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data.name))
  .catch(error => console.error(error));

What will be logged if the JSON response is {"name": "Alice", "age": 25}?

medium

A. "Alice"

B. undefined

C. 25

D. Error

Solution

1. Step 1: Parse JSON response

   The response JSON is parsed into an object: {name: "Alice", age: 25}.

2. Step 2: Access the 'name' property

   The code logs data.name, which is "Alice".

3. Final Answer:

   "Alice" -> Option A

4. Quick Check:

   data.name = "Alice" [OK]

Hint: Access parsed JSON properties directly by name [OK]

Common Mistakes:

• Logging data instead of data.name
• Expecting age instead of name
• Not parsing JSON before accessing properties

4. What is wrong with this React Native fetch code?

fetch('https://api.example.com/data')
  .then(response => response.json)
  .then(data => console.log(data))
  .catch(error => console.error(error));

medium

A. No catch block for errors

B. Missing parentheses after response.json

C. console.log should be console.error

D. fetch URL is incorrect

Solution

1. Step 1: Check response.json usage

   The code uses response.json without parentheses, so it references the function but does not call it.

2. Step 2: Correct function call syntax

   It should be response.json() to actually parse the JSON.

3. Final Answer:

   Missing parentheses after response.json -> Option B

4. Quick Check:

   Call response.json() with () [OK]

Hint: Always call response.json() with parentheses [OK]

Common Mistakes:

• Forgetting parentheses after response.json
• Assuming fetch URL is wrong without checking
• Confusing console.log and console.error usage

5. You receive this JSON response from a server:

{"users": [{"id": 1, "name": "Bob"}, {"id": 2, "name": "Carol"}]}

How do you extract an array of user names in React Native after parsing?

hard

A. data.names

B. data.map(user => user.name)

C. data.users.name

D. data.users.map(user => user.name)

Solution

1. Step 1: Understand JSON structure

   The JSON has a key "users" which is an array of user objects.

2. Step 2: Use map to extract names

   To get all names, use data.users.map(user => user.name) which creates a new array of names.

3. Final Answer:

   data.users.map(user => user.name) -> Option D

4. Quick Check:

   Map over data.users to get names [OK]

Hint: Map over array property to extract values [OK]

Common Mistakes:

• Mapping directly on data instead of data.users
• Trying to access data.users.name which is undefined
• Assuming data.names exists