Navigating through concatenated JSON strings in a web browser: A step-by-step guide

Question

Navigating through concatenated JSON strings in a web browser: A step-by-step guide

I am currently using Socket.IO to transmit data to the browser. The information being sent is a continuous stream of JSON objects, which upon arrival at the browser, transforms into a single large JSON string. However, the issue I am encountering is that this JSON string cannot be parsed by JSON.parse() due to its unconventional format.

Since the structure of the data can vary greatly, utilizing RegEx may not provide a viable solution. Additionally, it is important to note that the current setup is only temporary. Eventually, the server will preprocess the JSON stream before sending it to the browser, eliminating the need for a real-time stream. Therefore, I prefer to maintain the existing AJAX/Socket.IO configuration rather than switching to a JSON stream parser like OboeJS.

Is there a workaround to effectively parse this concatenated JSON string?

To clarify, the JSON will have the following structure:

{"a":"A"}{"b":"B"}{"c":"C"}

My objective is to parse it in a manner that allows me to access the individual elements as follows:

console.log(Object.a) //A
console.log(Object.b) //B
console.log(Object.c) //C

javascript json parsing stream frontend

Answer 1

Answer №1

If you're facing a situation like yours, consider employing Array.prototype.reduce to combine all JSON objects into one:

var unstructuredJson = '{"a":"A"}{"b":"B"}{"c":"C"}';
var jsonArray = "[" + unstructuredJson.split("}{").join("},{") + "]";
var objectArray = JSON.parse(jsonArray);

var result = objectArray.reduce(function(result, item) {
  Object.keys(item).forEach(function(propertyName) {
    result[propertyName] = item[propertyName];
  });

  return result;
}, {});

document.body.textContent = JSON.stringify(result);

The original poster mentioned in a comment:

[...] Each JSON might have nested data like {{}{}}{}{}{}

In such cases, the approach above may not work correctly.

A suggestion would be to use a delimiter when concatenating these JSON objects. This way, it will be easier to separate parent objects and only require changing split("}{") with the actual separator.

I recommend choosing a character that wouldn't normally appear within any property value. You can refer to this Wikipedia article on Control characters for ideas: Control character

Answer 2

If you're facing a situation like yours, consider employing Array.prototype.reduce to combine all JSON objects into one:

var unstructuredJson = '{"a":"A"}{"b":"B"}{"c":"C"}';
var jsonArray = "[" + unstructuredJson.split("}{").join("},{") + "]";
var objectArray = JSON.parse(jsonArray);

var result = objectArray.reduce(function(result, item) {
  Object.keys(item).forEach(function(propertyName) {
    result[propertyName] = item[propertyName];
  });

  return result;
}, {});

document.body.textContent = JSON.stringify(result);

The original poster mentioned in a comment:

[...] Each JSON might have nested data like {{}{}}{}{}{}

In such cases, the approach above may not work correctly.

A suggestion would be to use a delimiter when concatenating these JSON objects. This way, it will be easier to separate parent objects and only require changing split("}{") with the actual separator.

I recommend choosing a character that wouldn't normally appear within any property value. You can refer to this Wikipedia article on Control characters for ideas: Control character

Answer 3

Answer №2

In the case where each substring is valid JSON but when concatenated it doesn't form a valid JSON, a solution is to turn the string into a valid array literal and utilize JSON.parse. This way you can then process each object using Array methods like forEach:

var s = '{"a":"A"}{"b":"B"}{"c":"C"}';
var obj = JSON.parse('[' + s.replace(/}{/g,'},{') + ']').forEach(function (obj) {
  document.write(JSON.stringify(obj) + '<br>');
});

Alternatively, if you prefer to have it as a single object:

var s = '{"a":"A"}{"b":"B"}{"c":"C"}';
var obj = JSON.parse(s.replace(/}{/g,','));

document.write(JSON.stringify(obj));

Answer 4

In the case where each substring is valid JSON but when concatenated it doesn't form a valid JSON, a solution is to turn the string into a valid array literal and utilize JSON.parse. This way you can then process each object using Array methods like forEach:

var s = '{"a":"A"}{"b":"B"}{"c":"C"}';
var obj = JSON.parse('[' + s.replace(/}{/g,'},{') + ']').forEach(function (obj) {
  document.write(JSON.stringify(obj) + '<br>');
});

Alternatively, if you prefer to have it as a single object:

var s = '{"a":"A"}{"b":"B"}{"c":"C"}';
var obj = JSON.parse(s.replace(/}{/g,','));

document.write(JSON.stringify(obj));

Answer 5

Answer №3

To parse concatenated JSON objects, you can utilize the JsonParser as shown below:

    ObjectMapper objectMapper = new ObjectMapper();
    JsonFactory jsonFactory = new JsonFactory(objectMapper);

    JsonParser jsonParser = jsonFactory.createParser(jsonString);
    List<YourObject> yourObjectList = new ArrayList<>();

    Iterator<YourObject> iterator = jsonParser.readValuesAs(YourObject.class);
    while(iterator.hasNext()) {
        YourObject yourObject = iterator.next();
        yourObjectList.add(yourObject);
    }

Answer 6

To parse concatenated JSON objects, you can utilize the JsonParser as shown below:

    ObjectMapper objectMapper = new ObjectMapper();
    JsonFactory jsonFactory = new JsonFactory(objectMapper);

    JsonParser jsonParser = jsonFactory.createParser(jsonString);
    List<YourObject> yourObjectList = new ArrayList<>();

    Iterator<YourObject> iterator = jsonParser.readValuesAs(YourObject.class);
    while(iterator.hasNext()) {
        YourObject yourObject = iterator.next();
        yourObjectList.add(yourObject);
    }

Answer 7

Answer №4

Slice the extensive string {x:'X'}{y:'Y'}{z:'Z'} and analyze each part separately

Answer 8

Slice the extensive string {x:'X'}{y:'Y'}{z:'Z'} and analyze each part separately

Navigating through concatenated JSON strings in a web browser: A step-by-step guide

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Dialog in Angular Material refuses to close even after calling the dialog.close() function

What is the best way to initially conceal content and then reveal it only after an ajax call is made?

Struggling with validating forms with JavaScript

Show a distinct row from an API using React

Looping through each entity in Symfony allows for the conversion of entities to JSON format

Is it possible for the client to prevent the blocking of the Cross-Origin Resource Sharing (CORS) error?

Issue with attaching dynamic events is not functioning as expected

Building on the foundation of Web API 2.0: Using JavaScriptConverter for Tailored Date Formats

Issue with rendering an object's property using EJS

Why is the result of this specific JavaScript code a string?

Tips for adjusting the position of an infowindow in ArcGIS

What is the best way to update the style following the mapping of an array with JavaScript?

In PhantomJS, where is the location of the "exports" definition?

Dropzone user interface package experiencing issues with displaying image previews

Is it possible to automatically close navigation dropdowns when the screen size changes?

Remove entire objects from a JSON structure if they do not contain any key-value pairs

Unraveling exceptions in Node.js akin to handling them in Java

Stylist in Visual Studio Code for React applications

When utilizing Md-select in Protractor, how can the dropdown list be accessed?

Is it possible to alter the css twice through the action of clicking on two individual buttons