Back

Technologies:

javascriptjavascript
avatar
Tolerim
a month ago

How can I obtain JSON data from a local file by using parameters?

I have a local JSON file that contains multiple objects related to different postcodes. I have an input field where users can enter their postcode, and I want to fetch the relevant data from the JSON file based on that postcode. Since the JSON file contains thousands of lines, I don't want to retrieve the entire file; I only want to fetch the data that pertains to the user's entered postcode. Passing the postcode as a parameter while using the Fetch API would be ideal, ensuring only matching data is returned.

[
    {
        "Postcode": "ABC123",
        "Address": "10 King Street",
        ...
    },
    {
        "Postcode": "DEF456",
        "Address": "20 Queen Street",
        ...
    },
    {
        "Postcode": "GHI789",
        "Address": "30 Prince Street",
        ...
    }
]
Would it be possible to use the Fetch API with a parameter or query string to retrieve only relevant data? I am only using native JavaScript, without any framework or Node.js.

Answers(2)
avatar
Vogi
a month ago
Verified Answer
Yes, it is possible to fetch data from a JSON file based on a parameter in JavaScript. You can use the Fetch API to retrieve the JSON data from the file and then filter the data based on the user's entered postcode. Here's an example of how you can do it: 
fetch('data.json')
  .then(response => response.json())
  .then(data => {
    const postcode = 'ABC123'; // Replace with user's entered postcode
    const filteredData = data.filter(item => item.Postcode === postcode);
    console.log(filteredData);
  });
In this example, we first use the Fetch API to retrieve the JSON data from the file. We then use the filter() method to filter the data based on the user's entered postcode. The filter() method returns an array of objects that match the specified postcode. You can replace 'data.json' with the path to your JSON file and 'ABC123' with the user's entered postcode. I hope this helps! Let me know if you have any other questions.

Sources

Using the Fetch API - Web APIs | MDN - Mozilla DeveloperHow to Fetch and Display JSON Data in HTML Using JavaScriptHow to fetch data from JSON file and display in HTML ... - GeeksForGeeksHow to read JSON file with fetch () in javascript? - Stack Overflowjavascript - Fetching JSON from a local file using parameters - Stack ...JavaScript fetch () with JSON parameter - Stack Overflow
avatar
Tolerim
a month ago
Yes, it is possible to fetch only specific data from a JSON file using the Fetch API and passing a parameter. Here's an example code snippet to achieve this: 
let userInput = 'ABC123'; // This is the postcode entered by the user

fetch('data.json')
  .then(response => response.json())
  .then(data => {
    let filteredData = data.filter(obj => obj.Postcode === userInput);
    // filteredData will contain an array of objects that match the user's postcode

    console.log(filteredData);
  });
In this example, fetch is used to get the data from a local JSON file named data.json. The response is then converted to a JSON object using response.json(). After that, the filter method is used to create a new array of objects that match the user's postcode. The userInput variable in this example contains the postcode entered by the user. Finally, the filtered data is logged to the console. Note that this example assumes that the JSON data is an array of objects and that each object has a Postcode property. If your data is structured differently, you'll need to adjust the code accordingly. Also note that this example is case-sensitive, so make sure that your input matches the case of the postcode in the JSON data.
;