How to fetch json file and filter them by string value and place them inside a div

Question

How to fetch valid external json file and filter it by string value (eg:sam), finaly place it inside a div.

[{
"name": "sam",
"age": "26",
"salery": "20000",
"portfolio": "https://www.example.com/"},{
"name": "tony",
"age": "30",
"salery": "30000",
"portfolio": "https://www.example.com/"},{
"name": "sam",
"age": "24",
"salery": "15000",
"portfolio": "https://www.example.com/"}]

<script>fetch("worker.json")
.then((response) => response.json())document.getElementById("demo").innerHTML = .then((json) => json.filter(function(item){
return item.name == "sam"; }));</script>
<p id="demo"></p>

Already have some answers for this - Read JSON file -https://stackoverflow.com/questions/19706046/how-to-read-an-external-local-json-file-in-javascript and filter - https://stackoverflow.com/questions/23720988/how-to-filter-json-data-in-javascript-or-jquery — Rahul Bhawar, Jul 08 '21 at 06:35
the problem is I'm using external json, I don't know how to fetch it — , Jul 08 '21 at 06:39
When you say `external json` is that simply a json file on your server or on a remote server not under your dominion? — Professor Abronsius, Jul 08 '21 at 06:54

Irfan wani · Answer 1 · 2021-07-08T09:33:34.930

0

As you are using fetch, so you can do this;

let result;
fetch('pass url and config').then(res => {
    result = res.json() 
})

//result will look like this;
[{
"name": "sam",
"age": "26",
"salery": "20000",
"portfolio": "https://www.example.com/"},{
"name": "tony",
"age": "30",
"salery": "30000",
"portfolio": "https://www.example.com/"},{
"name": "sam",
"age": "24",
"salery": "15000",
"portfolio": "https://www.example.com/"}]

result.map(obj => {
if(obj.name == 'sam') {
document.getElementById('details').innerHTML += obj.age + ' ' + obj.salery + ' ' + obj.portfolio + '  '
}
})

<div id='details'></div>

edited Jul 08 '21 at 09:33

answered Jul 08 '21 at 06:40

Irfan wani

4,084
2
19
34

but how can i fetch the external json file instead of using let variable in the above js – Jul 08 '21 at 06:45
As you are using fetch, in the then block, get it by res.json() where res is the response from the request. – Irfan wani Jul 08 '21 at 06:59
can you explain me in detail – Jul 08 '21 at 07:41

Professor Abronsius · Accepted Answer · 2021-07-08T13:06:10.553

Untested but you ought to be able to do something like this - the data being saved as worker.json located in the same directory as operating script.

[
    {
        "name": "sam",
        "age": "26",
        "salery": "20000",
        "portfolio": "https://www.example.com/"
    },
    {
        "name": "tony",
        "age": "30",
        "salery": "30000",
        "portfolio": "https://www.example.com/"
    },
    {
        "name": "sam",
        "age": "24",
        "salery": "15000",
        "portfolio": "https://www.example.com/"
    }
]

And processed by:

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <title>fetch json & filter</title>
    </head>
    <body>
        <p id="demo"></p>
        <script>

            fetch("worker.json")
                .then( r=>r.json() )
                .then( json=>{
                    Object.keys( json ).forEach(k=>{
                        let obj=json[k];
                        
                        if( obj.name=='sam' ){
                            document.getElementById("demo").innerHTML+=[
                                'Name:'+obj.name,
                                'Age:'+obj.age,
                                'Salary:'+obj.salery,
                                'Portfolio:<a href="'+obj.portfolio+'" target="_blank">'+obj.portfolio+'</a>',
                                '<br />'
                            ].join('<br />')
                        }
                    })
                })

        </script>
    </body>
</html>

As there are two sams in the supplied data and no indication which to filter the use of += when calling document.getElementById("demo").innerHTML will add to any existing content - thus both entries should appear in the displayed output.

But the output doesn't give me a clickable link https://www.example.com/ How to add that. — , Jul 08 '21 at 07:39

How to fetch json file and filter them by string value and place them inside a div

2 Answers2