JSON Questions (How to manage, sort, and change JSON)

Programming Questions
3

JavaScript objects will have its keys sorted in a specific order, so keys might get rearranged. If you want them in order you could use an array like this:

{
    fields: [
        [oz: [28.35, "1 oz"]],
        [wt1: [125, "1 cup, quartered or chopped"]],
        [wt2: [109, "1 cup slices"]],
        [wt3: [223, "1 large (3-1/4 inch dia)"]],
        [wt4: [182, "1 medium (3 inch dia)"]],
        [wt5: [149, "1 small (2-3/4 inch dia)"]],
        [wt6: [101, "1 extra small (2-1/2 inch dia)"]],
        [wt7: [242, "1 NLEA serving"]],
        ["100g": [100, "100 grams"]],
        ["200cals": [384.615, "200 calorie serving"]],
    ];
}

JavaScript also has something called a Map object (which is different from the lowercase map function). A Map is similar to a regular JavaScript object, but it preserves the order of the keys.

Here’s an example of a function that transforms an input from a regular JS object to a Map that has keys in a specific order.

// JavaScript will move these around, putting the key `1` first
const obj = {
    a: 123,
    f: 321,
    z: 432,
    c: 543,
    1: 432
};

// This function takes an object (with keys in any order) and returns a
// map that preserves a specific order.
function orderedObject(o) {
    return new Map([
    	["a", o.a],
        ["f", o.f],
        ["z", o.z],
        ["c", o.c],
        [1, o["1"]]
    ]);
}

const m = orderedObject(obj);

console.log("the (unordered) object is:", obj);
console.log("the (ordered) map is:", m);

I’m wondering if there might be an easier way to accomplish the task though. If you’re interested in trying another way, I could take a look while screensharing.

It’s hard to know without seeing more of the code. I could take a look if you want.

That’s actually a JavaScript object. JSON is a string version of a JavaScript object that uses a special format.

JSON is kind of like a frozen shipping container for JavaScript objects. The code people write uses JavaScript objects, but when the program wants to send those objects over the network or into localStorage, it freezes them and packs them into a box (JSON). That frozen data can’t be easily used when it’s in the frozen box (JSON), so when you want to use the data again (on the other side of the network or after it comes out of localStorage), you unfreeze the JSON and convert it back into a JavaScript object.

The freezing and unfreezing functions work like this:

// Take a JS object and freeze it into a JSON string to send it somewhere
JSON.stringify(someObject);

// Unfreeze a JSON string and turn it back into an object that JS can use
JSON.parse(someJson);

I’ll update this tutorial with a few more examples later.

A quick way to check: if you take any object-looking thing in JavaScript and try to turn it toUpperCase, it will succeed if it’s JSON and fail if it’s an object. Example:

// A JavaScript object has key-value pairs
const obj= {
    name: "Dragon",
    treasure: "100 gems of 4,000gp value each"
};

// A JSON string is just plain text that has a format similar to an object
// (but JSON isn't really an object itself)
const json = '{"name":"Dragon","treasure":"100 gems of 4,000gp value each"}';

// This will work, because JSON is a string, not an object.
json.toUpperCase();

// This will cause an error, because objects can't be made uppercase
obj.toUpperCase();

They look almost the same, but they function differently. :slight_smile:

1 Like