How to get data based on a value from Json with fetch by javascript?

Question

I'm trying to get the values based on the id of elements in HTML. How can I get it from the JSON array? My JSON file looks like this:

[
  {
      "product": "gill",
      "link": "x.com",
      "thumbnail": "gill.jpg"
    },
    {
      "product": "folded",
      "link": "y.com",
      "thumbnail": "folded.jpg"
    }
]

and my JS file looks like:

window.onload = function (){
    const apiUri = "./test.json";
    const urun = document.getElementById("products");
    const search = document.getElementById("products").children[0].id;
        fetch(apiUri)
            .then(response => response.json())
            .then(data => {
            const Link = document.createElement("a");
            const Image = document.createElement("img");
                
            Link.setAttribute("href", data.link);
            Image.setAttribute("src", data.thumbnail);
            urun.append(Link);
            Link.append(Image);
            Link.classList.add(element.product);
        })
}

What I want to do is, if const search = gill, get the thumbnail value of gill from JSON, if const search = folded, get the thumbnail value of folded from JSON.

Could you please lead me the right way?

`window.onload = function` <-- **Don't do this**, instead use `document.addEventListener('DOMContentLoaded', function() { /* your stuff here */ })`. - this is because overwriting `window.onload` will silently _drop_ any previous event-handler - and anyway, `onload` is invoked for the `'load'` event which happens long after the HTML itself was ready for scripting - in fact the `'load'` event can occur _minutes_ after `'DOMContentLoaded'` if there's any slow-loading `iframes` or other extrnal content. — Dai, Aug 22 '22 at 07:22
Maybe you want to first unserialize your JSON to work with the data as a naive JS object: Have a look at JSON.parse — Psi, Aug 22 '22 at 07:24
@Psi [`response.json()`](https://developer.mozilla.org/en-US/docs/Web/API/Response/json) already does so. — Ivar, Aug 22 '22 at 07:25
@Psi do you mean to get data to js file? Actually i don't want to expose datas as much as possible. I'm a newbie in json world, trying to figure out. I saw an example which contains json.stringtify(data) and the data value was above like as const data = { product : product }, i tought it is for searching in json but couldn't figure it out. — gmg, Aug 22 '22 at 07:29
@gmg Also, consider using `async function` and `await` with `try/catch` instead of `.then().catch()`. — Dai, Aug 22 '22 at 07:30
@Ivar but it gives all data in json file, i want to get the values based on const search :/ — gmg, Aug 22 '22 at 07:32
@Dai are they instead of fetch? i saw an example on async function and await try to get json data but as i remember there were no fetch — gmg, Aug 22 '22 at 07:36
@Ivar, actually yes, that link you provided seems like the solution, only if i can figure out how to do this for data fetched from json file. data.find(el => el.product === 'gill') I will try this immediatly :) — gmg, Aug 22 '22 at 07:39
@Ivar thank you so much bro, data.find method worked like a charm :)) You've made my day. I'm also new to stackoverflow, how can i tag it as solution answer? — gmg, Aug 22 '22 at 07:47
why do you use fetch for importing data? it is a file that you have. — Deniz Karadağ, Aug 22 '22 at 07:47
@gmg You should have the option to select "this answered my question" (or something similar) in regards to the post I linked earlier. — Ivar, Aug 22 '22 at 07:50
@DenizKaradağ to be honest i don't actually know :/ I was trying to achieve this and i found a similar project and i tried to edit that into my need. It's the first time i'm using json. — gmg, Aug 22 '22 at 07:51
@Ivar as i googled how to mark it as accepted answer, i need to click on checkmark but only 2 answers with checkmark seem below. As these are comments, i don't have an option to click on checkmark. I will try to copy your comment as an answer and mark it. — gmg, Aug 22 '22 at 07:56
@gmg No need. We mark questions as [duplicates](https://stackoverflow.com/help/duplicates) to keep all the relevant information in one place. You should have the option to accept the proposed duplicate at the top of your answer. That should be sufficient. — Ivar, Aug 22 '22 at 07:57

score -1 · Answer 1 · answered Aug 22 '22 at 07:36

-1

Try this,

let array = [
  {
      "product": "gill",
      "link": "x.com",
      "thumbnail": "gill.jpg"
    },
    {
      "product": "folded",
      "link": "y.com",
      "thumbnail": "folded.jpg"
    }
]

searchString = 'gill',
  searchRegExp = new RegExp(searchString , 'i'); // 'i' makes the RegExp ignore case

let result = array.filter(function(e){
    return searchRegExp.test(e.thumbnail);
}).map(function(e){
    return e.thumbnail; // Will return "['gill.jpg']"
});

answered Aug 22 '22 at 07:36

Rajeesh

27
7

I assume i can do it like; let array = response.json; And the rest of code as you provided, so it works? I'll try this solution as well – gmg Aug 22 '22 at 07:40
I just put the logic only, you can fetch the array from API response or from where ever you required. – Rajeesh Aug 22 '22 at 07:46
i did not vote on your answer. Actually I haven't tried this method yet, since the find method worked. I will try this one also and i will inform about the result when i tried. – gmg Aug 22 '22 at 13:43

How to get data based on a value from Json with fetch by javascript?

1 Answers1