Unable to retrieve information from compact JSON files

Question

Unable to retrieve information from compact JSON files

It's been 2 hours and I still can't figure this out

I need help with reading my Json Data in my JavaScript File, saving it to a variable, and then printing it out.

I've tried multiple solutions but nothing seems to work (I'm new to JS). Can someone please assist:

This is what my Json File looks like:

var Quotes = {
    "allQuotes": [{
        "person": "- Martin Luther King Jr.",
        "quote": "In the End, we will remember not the words of our enemies, but the silence of our friends."

    }, {
        "person": " Uknown",
        "quote": "I am big! It is the pictures that got small."

    }, {
        "person": "- Apocalypse Now",
        "quote": " love the smell of napalm in the morning."

    }, {
        "person": " - Gone With the Wind",
        "quote": "Frankly, my dear, I do not give a damn."

    }, {
        "person": "- - Knute Rockne All American",
        "quote": " Tell em to go out there with all they got and win just one for the Gipper."

    }, {
        "person": "- Walt Disney",
        "quote": " It is kind of fun to do the impossible."

    }]
}

I'm using CodePen, here is the link: http://codepen.io/pat_the_hat_1992/pen/qqWmYL

//Please take a look at my code and make any necessary edits

javascript json

Answer 1

Answer №1

Your content does not adhere to proper JSON formatting. Remember, JSON is a data format and cannot contain JavaScript variables or assignments within its structure.

{
"allQuotes": [{
    "person": "- Martin Luther King Jr.",
    "quote": "In the End, we will remember not the words of our enemies, but the silence of our friends."
}, {
    "person": " Uknown",
    "quote": "I am big! It is the pictures that got small."
}, {
    "person": "- Apocalypse Now",
    "quote": " love the smell of napalm in the morning."
}, {
    "person": " - Gone With the Wind",
    "quote": "Frankly, my dear, I do not give a damn."
}, {
    "person": "- - Knute Rockne All American",
    "quote": " Tell em to go out there with all they got and win just one for the Gipper."
}, {
    "person": "- Walt Disney",
    "quote": " It is kind of fun to do the impossible."
}]
}

Removing var Quotes = will rectify your JSON file.

To fetch a JSON file in JavaScript, consider using XMLHttpRequest or $.ajax with jQuery.

Example with Vanilla Javascript

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://localhost/myJsonFile.json');
xhr.onload = function() {
    var quotes = JSON.parse(xhr.responseText);
    console.log(quotes);
};
xhr.send();

Alternatively, you can use jQuery:

jQuery Example

$.ajax({
    method: "GET",
    url: "http://localhost/myJsonFile.json",
    dataType: "json",
    success: function(json) {
        console.log(json);
    }
  });

Note that using $.ajax or XMLHttpRequest necessitates hosting your file on a web server. Accessing it from a local filesystem will not work.

For Further Exploration

Explore more about XMLHttpRequest here.

Learn more about JSON at this link.

For insights on Jquery's $.ajax, visit this page.

Answer 2

Your content does not adhere to proper JSON formatting. Remember, JSON is a data format and cannot contain JavaScript variables or assignments within its structure.

{
"allQuotes": [{
    "person": "- Martin Luther King Jr.",
    "quote": "In the End, we will remember not the words of our enemies, but the silence of our friends."
}, {
    "person": " Uknown",
    "quote": "I am big! It is the pictures that got small."
}, {
    "person": "- Apocalypse Now",
    "quote": " love the smell of napalm in the morning."
}, {
    "person": " - Gone With the Wind",
    "quote": "Frankly, my dear, I do not give a damn."
}, {
    "person": "- - Knute Rockne All American",
    "quote": " Tell em to go out there with all they got and win just one for the Gipper."
}, {
    "person": "- Walt Disney",
    "quote": " It is kind of fun to do the impossible."
}]
}

Removing var Quotes = will rectify your JSON file.

To fetch a JSON file in JavaScript, consider using XMLHttpRequest or $.ajax with jQuery.

Example with Vanilla Javascript

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://localhost/myJsonFile.json');
xhr.onload = function() {
    var quotes = JSON.parse(xhr.responseText);
    console.log(quotes);
};
xhr.send();

Alternatively, you can use jQuery:

jQuery Example

$.ajax({
    method: "GET",
    url: "http://localhost/myJsonFile.json",
    dataType: "json",
    success: function(json) {
        console.log(json);
    }
  });

Note that using $.ajax or XMLHttpRequest necessitates hosting your file on a web server. Accessing it from a local filesystem will not work.

For Further Exploration

Explore more about XMLHttpRequest here.

Learn more about JSON at this link.

For insights on Jquery's $.ajax, visit this page.

Answer 3

Answer №2

Check out the following code snippet which demonstrates how I achieve this:

let data = JSON.parse(Quotes);
for (let i = 0; i < data.allQuotes.length; i++) {
    let quoteObj = data.allQuotes[i];
    alert(quoteObj.person + " says " + quoteObj.quote);
}

Answer 4

Check out the following code snippet which demonstrates how I achieve this:

let data = JSON.parse(Quotes);
for (let i = 0; i < data.allQuotes.length; i++) {
    let quoteObj = data.allQuotes[i];
    alert(quoteObj.person + " says " + quoteObj.quote);
}

Answer 5

Answer №3

Did you attempt the method demonstrated on the official W3C website? It involves using '+' to concatenate the JSON text:

    var jsonData = '{ "employees" : [' +
    '{ "firstName":"John" , "lastName":"Doe" },' +
    '{ "firstName":"Anna" , "lastName":"Smith" },' +
    '{ "firstName":"Peter" , "lastName":"Jones" } ]}';

And then converting the JSON into a JavaScript Object, so that JavaScript can interpret it:

    var obj = JSON.parse(jsonData);

To utilize the object in your code, you would do something like this:

    document.getElementById("id").innerHTML =
    obj.employees[1].firstName + " " + obj.employees[1].lastName;

In this scenario, it would display "John Doe" because obj.employees[0].firstName is "John" and obj.employees[0].lastName is "Doe"

If you prefer using JQuery to display the data:

    $("id").append(obj.employees[0].firstName + " " + obj.employees[0].lastName);

or

    $("id").text(obj.employees[0].firstName + " " + obj.employees[0].lastName);

Below is a snippet demonstrating how to implement this on an actual webpage (it will show "Anna Smith" in the H1 Element):

<!DOCTYPE html>
<html>
    <body>
        <h1 id="demo"></h1>
        <script>
            var jsonData = '{ "employees" : [' +
            '{ "firstName":"John" , "lastName":"Doe" },' +
            '{ "firstName":"Anna" , "lastName":"Smith" },' +
            '{ "firstName":"Peter" , "lastName":"Jones" } ]}';

            var obj = JSON.parse(jsonData);

            document.getElementById("demo").innerHTML =
            obj.employees[1].firstName + " " + obj.employees[1].lastName;
        </script>
    </body>
</html>

Source: http://www.w3schools.com/js/js_json.asp

Answer 6

Did you attempt the method demonstrated on the official W3C website? It involves using '+' to concatenate the JSON text:

    var jsonData = '{ "employees" : [' +
    '{ "firstName":"John" , "lastName":"Doe" },' +
    '{ "firstName":"Anna" , "lastName":"Smith" },' +
    '{ "firstName":"Peter" , "lastName":"Jones" } ]}';

And then converting the JSON into a JavaScript Object, so that JavaScript can interpret it:

    var obj = JSON.parse(jsonData);

To utilize the object in your code, you would do something like this:

    document.getElementById("id").innerHTML =
    obj.employees[1].firstName + " " + obj.employees[1].lastName;

In this scenario, it would display "John Doe" because obj.employees[0].firstName is "John" and obj.employees[0].lastName is "Doe"

If you prefer using JQuery to display the data:

    $("id").append(obj.employees[0].firstName + " " + obj.employees[0].lastName);

or

    $("id").text(obj.employees[0].firstName + " " + obj.employees[0].lastName);

Below is a snippet demonstrating how to implement this on an actual webpage (it will show "Anna Smith" in the H1 Element):

<!DOCTYPE html>
<html>
    <body>
        <h1 id="demo"></h1>
        <script>
            var jsonData = '{ "employees" : [' +
            '{ "firstName":"John" , "lastName":"Doe" },' +
            '{ "firstName":"Anna" , "lastName":"Smith" },' +
            '{ "firstName":"Peter" , "lastName":"Jones" } ]}';

            var obj = JSON.parse(jsonData);

            document.getElementById("demo").innerHTML =
            obj.employees[1].firstName + " " + obj.employees[1].lastName;
        </script>
    </body>
</html>

Source: http://www.w3schools.com/js/js_json.asp

Unable to retrieve information from compact JSON files

Answer №1

Answer №2

Answer №3

Similar questions

Combining PHP JQuery Dialog with Datatables results in a sleek design loss

Inserting an HTML element into Handlebars.js during a specific iteration of an each loop

Tips for updating the value within a textfield in HTML

Adjust the size of images using jQuery to perfectly fit the container dimensions

Struggling with a TypeError in React/Next-js: Why is it saying "Cannot read properties of undefined" for 'id' when the object is clearly filled with data?

How can I preserve the line break in a textarea using PHP?

Verify the MAC address as the user types

Strange Reselect selector actions

Convert the entirety of this function into jQuery

Utilizing JavaScript and jQuery libraries in conjunction with periods

Implementing a delay between two div elements using jQuery

Responsive Alignment of Slanted Edges using CSS

The onchange() function for a multi-checkbox dropdown is failing to work as

Traveler encountering Flask website displaying 500 error on Dreamhost platform

Having an issue with the pop state function not functioning correctly

What is the proper way to utilize $apply and $watch in the Angularjs 1.4.10 Directive Structure?

Trying to dynamically filter table cells in real time using HTML and jQuery

What is the best way to dynamically update form fields in a database after making a selection in a <select> component?

What causes the console.log function to behave in this manner?

Generating dynamic div elements using jQuery