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

What is the best way to transition a connected component from a class-based to a functional component in TypeScript?

Mastering the use of getText() in Protractor with Page Object Model in Javascript

Exports for Express Router Module/Functions

How can I create a custom Sweet Alert button in JavaScript that redirects to a specific webpage when clicked?

Python 3 loop malfunctioning

What is the process for importing a class (.js file) into a .vue file?

Unable to activate click function in Jquery

Is Angular 2+ responsible for loading the entire module or only the exported components within it?

What is the Vercel equivalent to .netlify/functions?

Vue - unable to display component CSS classes in application when using class-style bindings

Sort the array in alphabetical and numerical order while meeting a specific condition

My goal is to extract the usernames of all sellers from the Poshmark webpage using a combination of JavaScript, Cheerio, and Axios

Tips for passing parameters to an ajax request in Django URL?

Error occurred when trying to run 'npm run dev' on vite: Unable to access the file "node_modules/react/jsx-dev-runtime.js"

How can I showcase CSV data as clickable links and images on a website using HTML?

"Exploring the world of Python API integration and dictionary

Enhance the functionality of NodeJS core applications

What could be causing the "Failed to decode JSON object: No JSON object could be decoded" error to appear in my program?

Retrieving and storing information from a form without the need to submit it

Is React Authentication with Ruby Gem Devise possible in JavaScript?