External jQuery and JSON not working

JavaScript
1

I am looking to create multiple html files for each brand with a common .js file and .json file. I am trying to replace the word ‘Brand’ in the common .js file with the respective brand name each time and get the respective data from the ‘.json’ file.

I am using a separate .js and .json file residing in the same folder as my html file. Then using the ‘text.replace’ command in each html file, I’m trying to get the relevant data from my JSON file through the common .js file.

My html file

<!DOCTYPE html>
<html>

<head>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="GetLocalJSON.js" type="text/javascript"></script>
</head>
<style>
</style>

<body>
    <div id="AboutTab">
        <div id=About>
        </div>
    </div>
</body>

<script>
$(document).ready(function(){

var url = "GetLocalJSON.js";
$.getScript( url, function() {
  $(document.body).find('Brand').each(function() {
    var text = $(this).text();
    $(this).text(text.replace('Brand', 'Samsung')); 
  });

});

});
</script>
</html>

My GetLocalJSON.js jQuery file:

$(document).ready(function(){
var StatJSON;
        jQuery.getJSON("QueryJSONData2.json", function (json) {
            StatJSON = json;

    var markup = '';
    markup += '<div>'+ StatJSON.Phone.Brand[0].Size +'<div>'
    
$("#About").html(markup)
});
});

My QueryJSONData2.json JSON file:

{
    "Phone": {
        "Samsung":[{
          "Size" : "AAA",
          "Camera" : "BBB",
          "Weight" : "CCC"
        }],
        "Apple":[{
            "Size" : "XXX",
            "Camera" : "YYY",
            "Weight" : "ZZZ"
          }]

    }

}

The error I am getting is “Uncaught TypeError: “Cannot read property ‘0’ of undefined” at the line :”

markup += '<div>'+ StatJSON.Phone.Brand[0].Size +'<div>'

which means my “text.replace” jquery command is not being action-ed. How do I fix this???

2

try StatJSON.Phone[Brand[0]].Size instead. Your code is telling Javascript to look at the 0th element of StatJSON.Phone.Brand, rather than trying to index the Brand[0] element of StatJSON.Phone.

EDIT: That said, i’m trying to find where you’ve defined Brand[0] at all, and not seeing it…

3

Oh i get what you’re trying to do now. Right. Sorry i’ll wake up eventually.

Yeah I wouldnt do all of that. I’d just define a variable:
let brand = "Samsung"
and then reference
StatJSON.Phone[brand][0].Size

4

Hi m_hutley!! Thank you for the useful insight. However the console.log error still remains the same, “Uncaught ReferenceError: Brand is not defined” at:

markup += '<div>'+ StatJSON.Phone[Brand[0]].Size +'<div>'

I believe the problem appears that ‘Brand’ is not being replaced by ‘Samsung’ as the text.replace is not kicking in, but not sure how to rectify it.

5 
<script>
let brand = "Samsung";
</script>
<script src="GetLocalJSON.js">

Don’t really need jQuery for that bit. Vanilla JS should handle it just fine…

6

Hi m_hutley. Many thanks for all your effort and quick replies. Your suggestion does make a lot of sense, however for some strange reason it ain’t happening.

The error is still Uncaught ReferenceError: Brand is not defined at

markup += '<div>'+ StatJSON.Phone[Brand[0]].Size +'<div>'

z
My new html:

<!DOCTYPE html>
<html>

<head>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    
</head>
<style>
</style>

<body>
    <div id="AboutTab">
        <div id=About>
        </div>
    </div>
</body>

<script>
let brand = "Samsung";
</script>
<script src="GetLocalJSON.js"></script>

</html>
7

…newer advice. :wink:

8

Thanks m_hutley. That worked!!! :slight_smile: And many thanks for all the patience with a newbie learning coding. :slight_smile: You Rock!!! :cowboy_hat_face:

1 Like
9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.