JavaScript: Extracting information from a JSON document

Question

JavaScript: Extracting information from a JSON document

I'm attempting to retrieve data from a JSON file in a separate JavaScript file. The goal is to log the title from config.json using main.js.

Exploring the dynamic between JSON and JavaScript in this project has been my current focus. I have experimented with import and export methods, but encountered an "unexpected identifier" error. Extensive research has been done on this topic.

JSON Content:

{
    "Info": {
    "title": "Pretty Cool Title",
    "bio": "Pretty cool bio too in my opinion."
    }
}

JavaScript Code:

import Info from "config.json";

var info = Info

var title = info.title

console.log(title);

The desired outcome is for the console to display the title (which is currently set as "pretty cool title"). However, the actual result is an "unexpected identifier" message.

javascript json

Answer 1

Answer №1

One way to retrieve JSON data is through the use of the fetch method.

// This function fetches and returns JSON data from a specified file path asynchronously
function getJSONData(path) {
    return fetch(path).then(response => response.json());
}

// Example of how to use the function to load JSON data and perform actions on it
getJSONData('data.json').then(data => {
    // Extract the 'name' property from the JSON object and display it in the console
    var name = data.name;
    console.log(name);  
}

UPDATE: If you prefer a more concise syntax, here's an alternative approach using async and await.

async function fetchData(path, callback) {
    return callback(await fetch(path).then(res => res.json()));
}

fetchData('data.json', info => console.log(info.name));

Answer 2

One way to retrieve JSON data is through the use of the fetch method.

// This function fetches and returns JSON data from a specified file path asynchronously
function getJSONData(path) {
    return fetch(path).then(response => response.json());
}

// Example of how to use the function to load JSON data and perform actions on it
getJSONData('data.json').then(data => {
    // Extract the 'name' property from the JSON object and display it in the console
    var name = data.name;
    console.log(name);  
}

UPDATE: If you prefer a more concise syntax, here's an alternative approach using async and await.

async function fetchData(path, callback) {
    return callback(await fetch(path).then(res => res.json()));
}

fetchData('data.json', info => console.log(info.name));

JavaScript: Extracting information from a JSON document

Answer №1

Similar questions

Issue with object property not being recognized in Vue script, despite working fine in template

Encountering an issue accessing a property retrieved from a fetch request in TypeScript

Trapped by commitments

Using keyvalue pipe in Angular to iterate over objects through inserted loops

How do webpack imports behave within a ReactJS project?

Obtaining entry to an ArrayList instance

The small device screen in Bootstrap 4.5 is experiencing an issue where two rows are overlapping

Steps to exclusively close a textbox using the cancel button in HTML, BootStrap, and AngularJS

Tips for formatting numbers within a chart

Creating nested JSON structures from a JSON string can be achieved using various programming techniques

The Foolish Mistake: Undetermined Dollar Sign

Utilized Python Selenium to interact with an element containing an x-click attribute, yet it failed to redirect

iOS device encounters failure with Ajax CORS request and redirect

Execute a PHP function using JavaScript/jQuery with AJAX requests

MongoDB function failing to properly return an array

Creating a custom name for a specific node_module

AngularJS - Setting an initial delay for ng-bind

Facing difficulty in converting JSON to Dictionary format

What is the best way to customize Node.js configuration when it is executed through npm?

What is the reason behind the warning "Function components cannot be given refs" when using a custom input component?