Converting an Array to JSON Object in JavaScript

JSON, or “JavaScript Object Notation”, is an extremely popular data exchange format, especially in web development. Let’s go over a few simple ways to convert an array to JSON data.

Sorry for the interruption! I just wanted to mention that you should check out our new free coding course. You’ll learn the absolute basics of writing code in one of the most useful languages in the world, JavaScript.

Quick Answer – JS Array to JSON

Arrays are actually valid JSON! If you’re just worried about validity, then you don’t even need to do any transformations. To prepare your array so that you can make a fetch request with it, it’s as simple as using the JSON.stringify() method.

const resp = await fetch('https://example.com', {     method'POST',     mode'cors',     headers: {       'Content-Type''application/json'     },     bodyJSON.stringify([1, 2, 3, 4, 5])   });
Code language: JavaScript (javascript)

The JSON.stringify() method converts a JavaScript object, array, or value to a JSON string that can be sent over the wire using the Fetch API (or another communication library).

Weird Answer – Array to JSON with indexes as keys

If you don’t want the direct string representation of a JSON array, you might want an object where the keys are the indexes of the array.

["apple", "orange", "banana"] // becomes { "0": "apple", "1": "orange", "2": "banana" }
Code language: JavaScript (javascript)

To get a JSON object from an array with index keys you can use the Object.assign method in conjunction with JSON.stringify.

const array = ["apple", "orange", "banana"] const jsonString = JSON.stringify(Object.assign({}, array)) // jsonString becomes // {"0":"apple","1":"orange","2":"banana"}
Code language: JavaScript (javascript)

When should you use arrays vs objects?

If you’re writing client-side code, its likely that you won’t get to decide. The API (back end) system that you’re working with will probably have documentation that will specify the shape of the data it expects. In general, iI would say its much more likely that an API will expect a top-level object for the request body, and if arrays of data are required they’ll be a nested value within that top-level object. For example, if I was writing an API that wanted a list of usernames, I’d probably accept the following JSON object:

{ "usernames": ["bill", "bob", "karen", "sue"] }
Code language: JSON / JSON with Comments (json)

Instead of a “naked” array, which is technically valid JSON:

["bill", "bob", "karen", "sue"]
Code language: JavaScript (javascript)

The reason that I generally prefer top-level objects is that I can add additional fields to the object in the future, without requiring large changes to the code. I also like it because it “self-documents” in a way. When you look at the first request body you can tell it’s an array of usernames, in the second example, those strings could be anything.

Have questions or feedback?

Follow and hit me up on Twitter @q_vault if you have any questions or comments. If I’ve made a mistake in the article, please let me know so I can get it corrected!

Leave a Comment