Create a JSON object in JavaScript that will specifically retrieve and return only the values where the value exists

Question

Create a JSON object in JavaScript that will specifically retrieve and return only the values where the value exists

These are the specific objects I am working with:

{"event":"auth success"}
{"event":"status","args":["running"]}
{"event":"console output","args":["openjdk version \"11.0.10\" 2021-01-19"]}
{"event":"console output","args":["OpenJDK Runtime Environment 18.9 (build 11.0.10+9)"]}
{"event":"console output","args":["OpenJDK 64-Bit Server VM 18.9 (build 11.0.10+9, mixed mode, sharing)"]}

I am incorporating this in my JavaScript code:

    var JSONObject = JSON.parse(event.data);
    var theDiv = document.getElementById("cli");
    theDiv.innerHTML += "<div>"+JSONObject["args"]+"</div>";

The result displayed is as follows:

undefined
running
openjdk version "11.0.10" 2021-01-19
OpenJDK Runtime Environment 18.9 (build 11.0.10+9)
OpenJDK 64-Bit Server VM 18.9 (build 11.0.10+9, mixed mode, sharing)

Is there a way to extract only the value of args when event is equal to "console output"?

javascript json object

Answer 1

Answer №1

In the event stream scenario where you receive objects one by one, you can achieve the desired outcome with this approach:

var json = `{"event":"console output","args":["OpenJDK Runtime Environment 18.9 (build 11.0.10+9)"]}`;

var JSONObject = JSON.parse(json);
var theDiv = document.getElementById("cli");
if(JSONObject.event === "console output") {
  theDiv.innerHTML += "<div>" + JSONObject["args"] + "</div>";
}

<div id="cli"></div>

If the objects are in a format different from valid JSON and separated by newline characters, then you will need to split them and parse each object individually like so:

var JSONObjects = json.split("\n").map(line => JSON.parse(line));
console.log(JSONObjects);
JSONObjects.forEach(obj => {
  var theDiv = document.getElementById("cli");
  if (obj.event === "console output") {
    theDiv.innerHTML += "<div>" + JSONObject["args"] + "</div>";
  }
});

Answer 2

In the event stream scenario where you receive objects one by one, you can achieve the desired outcome with this approach:

var json = `{"event":"console output","args":["OpenJDK Runtime Environment 18.9 (build 11.0.10+9)"]}`;

var JSONObject = JSON.parse(json);
var theDiv = document.getElementById("cli");
if(JSONObject.event === "console output") {
  theDiv.innerHTML += "<div>" + JSONObject["args"] + "</div>";
}

<div id="cli"></div>

If the objects are in a format different from valid JSON and separated by newline characters, then you will need to split them and parse each object individually like so:

var JSONObjects = json.split("\n").map(line => JSON.parse(line));
console.log(JSONObjects);
JSONObjects.forEach(obj => {
  var theDiv = document.getElementById("cli");
  if (obj.event === "console output") {
    theDiv.innerHTML += "<div>" + JSONObject["args"] + "</div>";
  }
});

Answer 3

Answer №2

function receiveMessage(event) {
            var targetDiv = document.getElementById("cli");
            var data = event.data.replaceAll("\u003e\u001b[2K\r", "");
            var parsedData = JSON.parse(data);
            if(parsedData.event === "console output") {
                targetDiv.innerHTML += "<div>" + data + "</div>";
                
            }
        };

display result

{"event":"console output","args":["\u003e\u001b[2K\r[16:11:16] [Server thread/INFO]: [Server] hello"]}

What could be causing the replacement issue?

Answer 4

function receiveMessage(event) {
            var targetDiv = document.getElementById("cli");
            var data = event.data.replaceAll("\u003e\u001b[2K\r", "");
            var parsedData = JSON.parse(data);
            if(parsedData.event === "console output") {
                targetDiv.innerHTML += "<div>" + data + "</div>";
                
            }
        };

display result

{"event":"console output","args":["\u003e\u001b[2K\r[16:11:16] [Server thread/INFO]: [Server] hello"]}

What could be causing the replacement issue?

Create a JSON object in JavaScript that will specifically retrieve and return only the values where the value exists

Answer №1

Answer №2

Similar questions

Testing an AngularJS factory that returns a promise and mocking a service that utilizes $http

Can someone assist me with navigating through my SQL database?

Effective strategies for utilizing AngularJS broadcast across various states within your application

What is the most effective way to compress a paragraph and fill in the remainder with '...'?

The most lightweight way to serialize a basic data structure

Issue with jQuery selection in ChromeI'm experiencing a problem with

Unable to transform JSON array into a string

Guide on mocking a function inside another function imported from a module with TypeScript and Jest

Guide to selecting a button within a Chrome Extension

How to activate a function or event upon closing a browser tab with JavaScript

Quickly remove items from a list without any keywords from the given keywords list

Having trouble selecting a TinyMCE iframe using a JavaScript file

Troubleshooting HTML Output Display Issues

Utilize the individual JSON objects within C++ Crow

At what point should the term "function" be included in a ReactJS component?

Unable to redirect from login page to dashboard using AJAX with Flask backend

Implementing updates to a website from a database without the need for a page refresh

Unable to get md-virtual-repeat to work within md-select?

Adapting the column width to display or hide content with CSS styling

What is the best way to transfer data from a fully filled out JSON form to a PHP database