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

Making a request using AJAX to retrieve data from an API

Content formatted with a gap

Filter ng-repeat using OR condition for property

What is the most effective method for fetching images from MongoDB?

VueJS - Harnessing the power of the Document Object Model for dynamic template rendering

Testing a function within a React functional component using jest.spyOn with React Testing Library can be accomplished with the following steps:

Tips for identifying the most effective element locator in the DOM with Playwright

Tips for sending an Object within a multipart/form-data request in Angular without the need for converting it to a string

Issue with Sequelize Associate function not functioning correctly

Leverage object properties as data table field values in VueJS

Is there a way to retrieve the id of a jQuery autocomplete input while inside the onItemSelect callback function?

How can a command in a test be executed that is located within a specific "section" in Nightwatch?

Enhanced hierarchical organization of trees

Transforming a JSON object property value from an array into a string using JavaScript

Go all the way down to see the latest messages

Exploring the integration of AJAX and jQuery with Django 1.3

Ensuring consistency in aligning float elements

Tips on maintaining the Parent menu in a hovered state when the mouse is over the child menu within a Dropdown Menu

Utilizing Dynamic Image Sources in Vue.js with the Help of APIs

Tips for adjusting the current window location in Selenium without having to close the window