JSON response parsing in React Native - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is JSON in the context of mobile app development?

JSON stands for JavaScript Object Notation. It is a simple text format used to exchange data between a server and a mobile app in a way that is easy to read and write.

beginner

How do you parse a JSON response in React Native?

You use the built-in JavaScript method JSON.parse() to convert a JSON string into a JavaScript object that your app can use.

beginner

What React Native function is commonly used to fetch JSON data from a server?

The fetch() function is used to make network requests. It returns a promise that resolves to a response object, which you can then parse as JSON.

intermediate

Why should you handle errors when parsing JSON responses?

Because the server might send invalid JSON or the network request might fail. Handling errors prevents the app from crashing and allows showing friendly messages to users.

beginner

What is the typical structure of a JSON response from a server?

A JSON response usually contains key-value pairs inside curly braces { }, where keys are strings and values can be strings, numbers, arrays, or other objects.

Which method converts a JSON string into a JavaScript object in React Native?

A parseJSON()

B JSON.stringify()

C JSON.parse()

D fetch()

JSON.parse() takes a JSON string and turns it into a JavaScript object.

What does the fetch() function return when called in React Native?

A A JSON object

B A promise resolving to a response

C An error

D A string

fetch() returns a promise that resolves to a response object, which you can then parse.

If the JSON response is invalid, what should your app do?

A Handle the error gracefully

B Ignore the response

C Crash immediately

D Reload the app

Handling errors gracefully prevents crashes and improves user experience.

Which of these is a valid JSON value?

A "Hello World"

B undefined

C function() {}

D NaN

JSON values can be strings like "Hello World", but not functions or undefined.

What is the first step to parse JSON from a fetch response?

A Call fetch.json()

B Call JSON.parse() directly on fetch

C Call JSON.stringify()

D Call response.json()

You call response.json() to get a promise that resolves to the parsed JSON object.

Explain how to fetch and parse JSON data in a React Native app.

Think about the steps from requesting data to using it in your app.

Describe why error handling is important when parsing JSON responses.

Consider what happens if the data is not what you expect.

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