Using Fetch command to store JSON data into HTML variable

JavaScript
21

I found another website and it gave me further guidance. So I adjusted my code again:

{"Diagonal_Lines": {
     "Diagonal_Line_1": [
          {"First_X1_Coordinate": "200px"},
          {"Second_X1_Coordinate": "295px"},
          {"First_Y1_Coordinate": "200px"},
          {"Second_Y1_Coordinate": "300px"}],
     "Diagonal_Line_2": [           
           {"First_X1_Coordinate": "400px"},
           {"Second_X1_Coordinate": "305px"},
           {"First_Y1_Coordinate": "200px"},
           {"Second_Y1_Coordinate": "300px"}]}
	
}

Then I adjusted my javascript:

function Setup () {
    
    var URL = 'http://localhost:8080/exist/rest/db/apps/HTML_Student/SVG_Diagonal_Line.json';

    fetch(URL)
        .then(res => res.json())
        .then(data => {
            // To display just the name in the textbox
            document.getElementById("Data_Text").value = data.Diagonal_Lines[Diagonal_Line_1][0].First_X1_Coordinate;

            // Or, if you want to show the whole JSON object as a string:
            // document.getElementById("JSON_Text").value = JSON.stringify(data);
        });
}

Then the console told me that Diagonal_Line_1 is undefined. And I don’t know where I went wrong.

22

I seem to be improving, but I’m still running into glitches. My Javascript now looks like this:

function Setup_2 () {
    
    var URL = 'http://localhost:8080/exist/rest/db/apps/HTML_Student/SVG_Diagonal_Line.json';

    fetch(URL)
        .then(res => res.json())
        .then(data => {
            console.log(data);
            // To display just the name in the textbox
            document.getElementById("Data_Text").value = data.Diagonal_Lines.Diagonal_Line_1[0].Second_Y1_Coordinate;

            // Or, if you want to show the whole JSON object as a string:
            // document.getElementById("JSON_Text").value = JSON.stringify(data);
        });
}

And I adjusted my JSON code:

{"Diagonal_Lines": {
     "Diagonal_Line_1": [
          {"First_X1_Coordinate": "200px",
          "Second_X1_Coordinate": "295px",
          "First_Y1_Coordinate": "200px",
          "Second_Y1_Coordinate": "300px"}]},
       "Diagonal_Line_2": [           
           {"First_X1_Coordinate": "400px",
           "Second_X1_Coordinate": "305px",
           "First_Y1_Coordinate": "200px",
           "Second_Y1_Coordinate": "300px"}]}

I can access any part of the Diagonal_Line_1 array. But I can’t access any of the Diagonal_Line_2 array. I don’t know why this is happening. Any sugestions?

23

I had to change my Javascript one more time:

function Setup () {
    
    var URL = 'http://localhost:8080/exist/rest/db/apps/HTML_Student/SVG_Diagonal_Line.json';

    fetch(URL)
        .then(res => res.json())
        .then(data => {
            console.log(data);
            // To display just the name in the textbox
            document.getElementById("Data_Text").value = data.Diagonal_Lines.Diagonal_Line_2.First_X1_Coordinate;

            // Or, if you want to show the whole JSON object as a string:
            // document.getElementById("JSON_Text").value = JSON.stringify(data);
        });
}

And I had to make a couple of adjustments to my JSON document:

{"Diagonal_Lines": {
     "Diagonal_Line_1": 
          {"First_X1_Coordinate": "200px",
          "Second_X1_Coordinate": "295px",
          "First_Y1_Coordinate": "200px",
          "Second_Y1_Coordinate": "300px"},
       "Diagonal_Line_2":            
           {"First_X1_Coordinate": "400px",
           "Second_X1_Coordinate": "305px",
           "First_Y1_Coordinate": "200px",
           "Second_Y1_Coordinate": "300px"}}}

Finally my code works. Thanks for all your patience in this matter.

1 Like
24

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.