Fetch Particular String/object from an external json file

I wanted to know how can you fetch a particular string/object in external json file? I am coding a website of online shop for shoes where you can categorize the kind of shoes to display by reading it from json file to javascript but how?
HTML FILE:
   
        <!DOCTYPE html>
<html lang="en">

<head>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <title> Online Shop </title>
</head>

<body>
    <nav>
        <ul>

            <li><a href="#">Stilettos</a></li>
            <li><a href="#">Wedges</a></li>

        </ul>

    </nav>


</body>

</html>

Open in new window


JSON FILE

[{
    "name": "DKNY",

    "category": "Stilettos",

    "location": "Texas",
  },

  {
    "name": "Prada",

    "category": "Wedge",

    "location": "Texas",
  },

  {
    "name": "Jimmy Choo",

    "category": "Stilettos",

    "location": "Melbourne",
  },
];
A MAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Ellionor SabatiniHTML Manager in Maurelle Professinals, Inc.Commented:
You have a make ajax xhttp request, you can visit this link to understand it https://www.w3schools.com/js/js_json_http.asp, after it you have to create a variable,

function youfunction(a) {
    a = JSON.parse(a);
    // this is the action to do with the data //
    console.log(a.name);
    // the result is: DKNY.
    console.log(a.category);
    // the result is: Stilettos.
}

// now here your request of the file //
var xmlhttp = new XMLHttpRequest();
var url = "you json file url";
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        youfunction(this.responseText);
    }
};
xmlhttp.open("GET", url, true);
xmlhttp.send();

Open in new window


I hope this help you...
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
A MAuthor Commented:
Thank you very much. But I was hoping it was a pure JavaScript. I have only done the button function yet in JavaScript but it is actually hard when in nav form
0
Ellionor SabatiniHTML Manager in Maurelle Professinals, Inc.Commented:
My answer is JavaScript (Pure), but ok, no problem :)
0
Julian HansenCommented:
Suggestion - don't use raw XMLHttpRequest - there are libraries for this

Using jQuery you can do this very easily
// Load your preferred jQuery source here
<script>
$(function() {
  $.get('/path/to/json/file.json', function(data) {
     // data now holds a parsed JavaScript object
     for(var i = 0; i < data.length; i++) {
       console.log('Name: ', data[i].name);
     }
  },'JSON');
});
</script>

Open in new window

0
Julian HansenCommented:
@ A M
Do you still require assistance with this question? If so post back here - otherwise please can you close the question.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.