Reading the Order With JSON.parse()

So far, order 1042 has lived in the JavaScript port as an object literal that you typed in by hand. In the shop, though, the order arrives as text. Marta copies the raw order JSON from the shop platform’s admin page, and her Python script turns that text into a dictionary with json.loads(). At the other end, it turns the finished label back into text with json.dumps() so she can paste it into the courier’s booking form.

Both ends have to work in JavaScript before the label maker is any use. In this lesson, you’ll read the pasted order and print the label, and you’ll see why JavaScript needs no import for either. Start with the text Marta pastes in.

Read the Pasted Order With JSON.parse()

The Python script stores the pasted text in a triple-quoted string and parses it once, near the top:

Language: Python
import json

ORDER_TEXT = """{
  "id": 1042,
  "billing_address": {
    "name": "Iris Okafor",
    "street": "12 Marsh Lane",
    "city": "Leeds",
    "postcode": "LS6 2QA",
    "country": "GB"
  },
  "shipping_address": null,
  "insured_value": 0,
  "line_items": [
    { "sku": "A5-DOT", "qty": 2 },
    { "sku": "A6-LINED", "qty": 1 }
  ],
  "tags": ["gift", "fragile", "gift"],
  "total": 46.0
}"""

order = json.loads(ORDER_TEXT)

In the JavaScript port, the paste goes between backticks because a template literal can span several lines as a triple-quoted string does. Then JSON.parse() turns the text into an object:

Language: JavaScript
const ORDER_TEXT = `{
  "id": 1042,
  "billing_address": {
    "name": "Iris Okafor",
    "street": "12 Marsh Lane",
    "city": "Leeds",
    "postcode": "LS6 2QA",
    "country": "GB"
  },
  "shipping_address": null,
  "insured_value": 0,
  "line_items": [
    { "sku": "A5-DOT", "qty": 2 },
    { "sku": "A6-LINED", "qty": 1 }
  ],
  "tags": ["gift", "fragile", "gift"],
  "total": 46.0
}`;

const order = JSON.parse(ORDER_TEXT);
console.log(order.id);
console.log(order.shipping_address);
console.log(order.insured_value);

Locked learning resources

Join us and get access to thousands of tutorials and a community of expert JavaScript developers.

Unlock This Lesson

Already a member? Sign-In

Locked learning resources

The full lesson is for members only. Join us and get access to thousands of tutorials and a community of expert JavaScript developers.

Unlock This Lesson

Already a member? Sign-In

Become a Member to join the conversation.