JSON response parsing in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to parse JSON response using fetch and extract data.

React Native

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

Drag options to blanks, or click blank then click option'

AformData

Btext

Cblob

Djson

Attempts:

3 left

💡 Hint

Common Mistakes

Using response.text() instead of response.json() causes raw text output.

Forgetting to call the method as a function (missing parentheses).

The fetch API response has a json() method to parse the JSON body.

2fill in blank

medium

Complete the code to extract the 'name' property from the parsed JSON object.

React Native

fetch('https://api.example.com/user')
  .then(response => response.json())
  .then(data => {
    const userName = data.[1];
    console.log(userName);
  });

Drag options to blanks, or click blank then click option'

Ausername

Buser

Cname

Did

Attempts:

3 left

💡 Hint

Common Mistakes

Using a wrong property name that does not exist in the JSON.

Trying to access nested properties without checking the structure.

Assuming the JSON has a 'name' property, access it with data.name.

3fill in blank

hard

Fix the error in accessing nested JSON data inside the response.

React Native

fetch('https://api.example.com/profile')
  .then(response => response.json())
  .then(data => {
    const city = data.address[1]city;
    console.log(city);
  });

Drag options to blanks, or click blank then click option'

A->

B.

C["address"]

D['address']

Attempts:

3 left

💡 Hint

Common Mistakes

Using '->' which is not valid in JavaScript.

Using bracket notation incorrectly without quotes.

Use dot notation to access nested properties: data.address.city.

4fill in blank

hard

Fill both blanks to correctly parse JSON and extract the first item from an array.

React Native

fetch('https://api.example.com/items')
  .then(response => response.[1]())
  .then(data => {
    const firstItem = data.[2][0];
    console.log(firstItem);
  });

Drag options to blanks, or click blank then click option'

Ajson

Btext

Citems

Dresults

Attempts:

3 left

💡 Hint

Common Mistakes

Parsing response as text instead of JSON.

Accessing a wrong property name that does not hold the array.

Use response.json() to parse JSON, then access the 'items' array to get the first element.

5fill in blank

hard

Fill all three blanks to parse JSON, extract user info, and check if age is over 18.

React Native

fetch('https://api.example.com/userinfo')
  .then(response => response.[1]())
  .then(data => {
    const user = data.[2];
    if (user.age [3] 18) {
      console.log('Adult user');
    }
  });

Drag options to blanks, or click blank then click option'

Ajson

Bprofile

C>

Dtext

Attempts:

3 left

💡 Hint

Common Mistakes

Parsing response as text instead of JSON.

Using wrong property name for user data.

Using incorrect comparison operator.

Parse JSON with response.json(), access 'profile' property, and check if age > 18.