Pretty, raw, and preview views in Postman - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to select the view that formats JSON responses nicely in Postman.

Postman

responseBody.view = '[1]';

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

Apretty

Braw

Cpreview

Dcompact

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing 'raw' which shows unformatted text.

Selecting 'preview' which renders HTML content.

The pretty view formats JSON responses with indentation and colors for easy reading.

2fill in blank

medium

Complete the code to select the view that shows the exact response text without formatting.

Postman

responseBody.view = '[1]';

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

Araw

Bpreview

Cpretty

Dformatted

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing 'pretty' which formats the response.

Selecting 'preview' which renders HTML content.

The raw view shows the response exactly as received, without any formatting.

3fill in blank

hard

Fix the error in the code to select the view that renders HTML content in Postman.

Postman

responseBody.view = '[1]';

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

Apretty

Bpreview

Craw

Dhtml

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'raw' which shows unformatted text.

Using 'pretty' which formats JSON but does not render HTML.

The preview view renders HTML content so you can see how it looks in a browser.

4fill in blank

hard

Fill both blanks to set the response view to pretty and check if the content type is JSON.

Postman

if (response.headers['Content-Type'] [1] 'application/json') {
  responseBody.view = '[2]';
}

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

A===

B!==

Cpretty

Draw

Attempts:

3 left

💡 Hint

Common Mistakes

Using '!==', which means not equal.

Setting view to 'raw' which does not format JSON.

The code checks if the content type is exactly 'application/json' using ===, then sets the view to pretty for formatted JSON.

5fill in blank

hard

Fill all three blanks to set the response view based on content type: pretty for JSON, preview for HTML, raw otherwise.

Postman

if (response.headers['Content-Type'] [1] 'application/json') {
  responseBody.view = '[2]';
} else if (response.headers['Content-Type'] [3] 'text/html') {
  responseBody.view = 'preview';
} else {
  responseBody.view = 'raw';
}

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

A===

B!==

Cpretty

Draw

Attempts:

3 left

💡 Hint

Common Mistakes

Using '!==', which means not equal.

Setting wrong views for content types.

The code uses strict equality === to check content types. It sets pretty view for JSON, preview for HTML, and raw for others.

Practice

1. Which Postman view shows the API response formatted with colors and indentation for easy reading?

easy

A. Raw view

B. Pretty view

C. Preview view

D. Headers view

Solution

1. Step 1: Understand the purpose of Pretty view

   The Pretty view formats JSON, XML, or HTML responses with colors and indentation to make them easier to read.

2. Step 2: Compare with other views

   Raw view shows the exact text without formatting, and Preview renders HTML content visually. Headers view shows response headers, not body.

3. Final Answer:

   Pretty view -> Option B

4. Quick Check:

   Formatted response = Pretty view [OK]

Hint: Pretty = formatted and colored response for easy reading [OK]

Common Mistakes:

• Confusing Raw view with Pretty view
• Thinking Preview shows formatted text instead of rendered content
• Mixing Headers view with body views

2. Which of the following is the correct way to switch to the Raw view in Postman after receiving a response?

easy

A. Go to Settings and enable Raw mode

B. Right-click the response and select 'Raw view'

C. Click the 'Raw' tab next to 'Pretty' in the response section

D. Double-click the response body

Solution

1. Step 1: Locate the response view tabs

   In Postman, response views like Pretty, Raw, and Preview appear as tabs above the response body.

2. Step 2: Identify how to switch views

   Clicking the 'Raw' tab directly switches the view to show the exact response text without formatting.

3. Final Answer:

   Click the 'Raw' tab next to 'Pretty' in the response section -> Option C

4. Quick Check:

   Switch views by clicking tabs = Click the 'Raw' tab next to 'Pretty' in the response section [OK]

Hint: Switch views by clicking tabs: Pretty, Raw, Preview [OK]

Common Mistakes:

• Trying to right-click for Raw view (no such option)
• Looking in Settings instead of response tabs
• Double-clicking does not change views

3. Given an HTML API response, what will you see in the Preview view of Postman?

medium

A. A rendered HTML page if the response contains HTML

B. A formatted and colored JSON with indentation

C. The raw JSON text exactly as received

D. Only the response headers without body

Solution

1. Step 1: Understand Preview view purpose

   The Preview view renders HTML content visually, like a browser would, showing the page layout and images.

2. Step 2: Consider JSON response in Preview

   If the response is JSON, Preview does not format or show it as text; it tries to render it, which usually results in a blank or raw display.

3. Final Answer:

   A rendered HTML page if the response contains HTML -> Option A

4. Quick Check:

   Preview = rendered HTML content [OK]

Hint: Preview shows rendered HTML, not raw or formatted JSON [OK]

Common Mistakes:

• Thinking Preview formats JSON like Pretty view
• Confusing Raw view with Preview
• Expecting headers in Preview

4. You switched to the Preview view in Postman but see a blank screen instead of your expected HTML page. What is the most likely reason?

medium

A. The response is JSON, not HTML, so Preview cannot render it

B. You forgot to click the Pretty tab first

C. Postman does not support Preview view

D. The Raw view is disabled in settings

Solution

1. Step 1: Identify response content type

   Preview view renders HTML visually. If the response is JSON or plain text, Preview cannot render it as a page.

2. Step 2: Understand why blank appears

   Since JSON is not HTML, Preview shows blank or raw text, not a formatted page.

3. Final Answer:

   The response is JSON, not HTML, so Preview cannot render it -> Option A

4. Quick Check:

   Preview blank = non-HTML response [OK]

Hint: Preview blank? Check if response is HTML or not [OK]

Common Mistakes:

• Thinking Pretty tab must be clicked first
• Believing Postman lacks Preview support
• Assuming Raw view settings affect Preview

5. You receive an API response with HTML content that includes CSS. Which Postman view should you use to verify the page visually as a user would see it, and why?

hard

A. Pretty view, because it formats HTML with colors and indentation

B. Raw view, because it shows the exact source code including scripts

C. Headers view, because it shows content type and length

D. Preview view, because it renders HTML and CSS like a browser

Solution

1. Step 1: Understand the content type and views

   HTML with JavaScript and CSS needs to be rendered to see the actual page as a user would.

2. Step 2: Identify the view that renders content

   Preview view renders HTML, applies CSS styles, showing the page visually.

3. Step 3: Compare with other views

   Pretty view only formats the source code text, Raw shows unformatted source, Headers show metadata only.

4. Final Answer:

   Preview view, because it renders HTML and CSS like a browser -> Option D

5. Quick Check:

   Visual page check = Preview view [OK]

Hint: Use Preview to see rendered page with CSS and styles [OK]

Common Mistakes:

• Choosing Pretty view expecting visual rendering
• Confusing Raw view with rendered output
• Expecting source code views to show visual layout