Utilizing a JSON object passed from one JavaScript function to another: A comprehensive guide

Question

Utilizing a JSON object passed from one JavaScript function to another: A comprehensive guide

After creating a function that returns JSON format through an ajax call, I received the following JSON data:

 {
    "communication": [{
        "communication_name": "None",
        "communication_id": "1"
    }],
    "hardware": [{
        "hardware_name": "XXXXXXXX",
        "hardware_id": "6"
    }],
    "Sofware": [{
        "software_name": "XXXXXX",
        "software_id": "3"
    }, {
        "software_name": "XXXXXXXXXXXXX",
        "software_id": "4"
    }]
}

The JavaScript function used to retrieve this response is as follows:

function getModelData(model_id, model_name){

     var xmlHttp = createXmlHttpRequestObject();

    try {
    xmlHttp.open("GET", "ajaxmodel_new.php?model_id="+model_id,true);
    xmlHttp.onreadystatechange = function() {
        if (xmlHttp.readyState == 4 && xmlHttp.status==200){
        var myJSONObject =  JSON.parse(xmlHttp.responseText)
        //alert(myJSONObject.communication[0].communication_name)
         }
    }
    xmlHttp.send(null);

    } catch (e){
    alert("Can't connect to server:\n" + e.toString());
    }
}

The correct response is being obtained. Another function is created to get the selected value from a dropdown menu:

<div id="selected_options">
                <select onchange="test()" id="selected_opt">
                <option value="0" selected>-Select-</option>
                <option value="1">Communication</option>
                             </select></div>
function test() {
    var get_id = document.getElementById('selected_opt');
    var result = get_id.options[get_id.selectedIndex].value;
    alert(result);
}

Objective

The goal now is to utilize the JSON response, specifically myJSONObject, in the test() function. How can the variable myJSONObject obtained in the getModelData() ajax function be utilized in the test() function?

javascript ajax json

Answer 1

Answer №1

My approach to parsing the JSON Object was a bit different.

First, on the PHP side, I create the object and store it in a variable, let's call it $JSONvar. Then, I simply use echo to output the variable.

Next, on the client side, here is how I handle the object:

var JsonObject = {};
var http = new XMLHttpRequest();
http.open("GET", url, true); // The URL that echoes the JSON string
http.onreadystatechange = function () {
if (http.readyState == 4 && http.status == 200) {
    var responseTxt = http.responseText;
    myJSONObject = eval('(' + responseTxt + ')');
    test(myJSONObject);
 }
}
http.send(null);

The test function should be able to access the object like this:

function test(myJSONObject) {
var object = myJSONObject;
alert(object);
var get_id = document.getElementById('selected_opt');
var result = get_id.options[get_id.selectedIndex].value;
alert(result);
}

Answer 2

My approach to parsing the JSON Object was a bit different.

First, on the PHP side, I create the object and store it in a variable, let's call it $JSONvar. Then, I simply use echo to output the variable.

Next, on the client side, here is how I handle the object:

var JsonObject = {};
var http = new XMLHttpRequest();
http.open("GET", url, true); // The URL that echoes the JSON string
http.onreadystatechange = function () {
if (http.readyState == 4 && http.status == 200) {
    var responseTxt = http.responseText;
    myJSONObject = eval('(' + responseTxt + ')');
    test(myJSONObject);
 }
}
http.send(null);

The test function should be able to access the object like this:

function test(myJSONObject) {
var object = myJSONObject;
alert(object);
var get_id = document.getElementById('selected_opt');
var result = get_id.options[get_id.selectedIndex].value;
alert(result);
}

Answer 3

Answer №2

Execute the test() function within the xmlHttp.onreadystatechange method, making sure to pass the decoded object as an argument.

Answer 4

Execute the test() function within the xmlHttp.onreadystatechange method, making sure to pass the decoded object as an argument.

Utilizing a JSON object passed from one JavaScript function to another: A comprehensive guide

Objective

Answer №1

Answer №2

Similar questions

The Ajax call is expiring before completing

Why isn't my classList .add method working properly?

A fresh checkbox was added to the page using Jquery Switchery to disable it

Is it possible for me to create a lineString connecting two points in OpenLayers3?

Using jQuery to drag a div and drop it to swap out an image in a different

Vue instance with non-reactive data

What's the best way to update the value of a TextInput field?

Trouble with Component Lifecycle (ComponentDidMount) activation while switching tabs in TabBar?

JavaScript: Determining the point on a perpendicular line that is consistently a fixed distance away

Stopping XSS Attacks in Express.js by Disabling Script Execution from POST Requests

Is it possible for a PHP form to generate new values based on user input after being submitted?

Tips for creating text that adjusts to the size of a div element

I'm feeling lost trying to figure out how to recycle this JavaScript function

When the modal is closed, the textarea data remains intact, while the model is cleared

kibana is throwing an error message that says it was expecting an end object but instead received a field name, potentially indicating an issue with

Exporting Axios.create in Typescript can be accomplished by following a few simple

Is it feasible to utilize the translate function twice on a single element?

Select a particular item and transfer its unique identifier to a different web page. Are there more efficient methods to accomplish this task without relying on href links and using the $_GET

ReactJS: Alert for controlled form element

use javascript or jquery to conceal the textbox control