javascript - I can't add buttons with filling from JSON file - Stack Overflow

admin管理员组

文章数量:1122832

I have an html project to which I need to add 4 buttons filled from a JSON file using an array. The parameters are taken depending on the link id.

    <div class="d-flex justify-content-around mt-4">
        <a href="#" id="button-1" class="btn btn-primary">
            <img src="" alt="Icon" id="icon-button-1"> Button 1
        </a>
        <a href="#" id="button-2" class="btn btn-primary">
            <img src="" alt="Icon" id="icon-button-2"> Button 2
        </a>
        <a href="#" id="button-3" class="btn btn-primary">
            <img src="" alt="Icon" id="icon-button-3"> Button 3
        </a>
        <a href="#" id="button-4" class="btn btn-primary">
            <img src="" alt="Icon" id="icon-button-4"> Button 4
        </a>
    </div>
</div>

        

$(document).ready(function () {
    const urlParams = new URLSearchParams(window.location.search);
    const repoId = urlParams.get('id');



    $.getJSON('repositories.json', function (data) {
        const repo = data.find(r => r.id === repoId);


    

        if (repo.buttons && Array.isArray(repo.buttons)) {
            repo.buttons.forEach((button, index) => {
                const btn = $(`#button-${index + 1}`);
                if (btn.length > 0) {
                    btn.attr('href', button.link || '#');
                    btn.find('img').attr('src', button.icon || 'default-icon.png');
                    btn.find('span').text(button.text || `Button ${index + 1}`);
                }
            });
        }
    });

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

Code from JSON file:

[
    {
        "id": "repo1",

        "buttons": [
            {
                "link": "exmpl.html",
                "icon": "exmpl.png",
                "text": "btn exmpl1"
            },
            {
                "link": "exmpl.html",
                "icon": "exmpl.png",
                "text": "btn exmpl2"
            },
            {
                
                "link": "exmpl.html",
                "icon": "exmpl.png",
                "text": "btn exmpl3"
            },
            {
                "link": "exmpl.html",
                "icon": "exmpl.png",
                "text": "btn exmpl4"
            }
        ]
    },

    {
        "id": "repo2",

        "buttons": [
            {
                "link": "exmpl.html",
                "icon": "exmpl.png",
                "text": "btn exmpl1"
            },
            {
                "link": "exmpl.html",
                "icon": "exmpl.png",
                "text": "btn exmpl2"
            },
            {
                "link": "exmpl.html",
                "icon": "exmpl.png",
                "text": "btn exmpl3"
            },
            {
                "link": "exmpl.html",
                "icon": "exmpl.png",
                "text": "btn exmpl4"
            }
        ]

    }
]

I tried renaming repo.buttons to repoId.buttons, but it didn't help (fixed the error in the console, but the problem remained)

Console error: Uncaught ReferenceError: repo is not defined

I have an html project to which I need to add 4 buttons filled from a JSON file using an array. The parameters are taken depending on the link id.

    <div class="d-flex justify-content-around mt-4">
        <a href="#" id="button-1" class="btn btn-primary">
            <img src="" alt="Icon" id="icon-button-1"> Button 1
        </a>
        <a href="#" id="button-2" class="btn btn-primary">
            <img src="" alt="Icon" id="icon-button-2"> Button 2
        </a>
        <a href="#" id="button-3" class="btn btn-primary">
            <img src="" alt="Icon" id="icon-button-3"> Button 3
        </a>
        <a href="#" id="button-4" class="btn btn-primary">
            <img src="" alt="Icon" id="icon-button-4"> Button 4
        </a>
    </div>
</div>

        

$(document).ready(function () {
    const urlParams = new URLSearchParams(window.location.search);
    const repoId = urlParams.get('id');



    $.getJSON('repositories.json', function (data) {
        const repo = data.find(r => r.id === repoId);


    

        if (repo.buttons && Array.isArray(repo.buttons)) {
            repo.buttons.forEach((button, index) => {
                const btn = $(`#button-${index + 1}`);
                if (btn.length > 0) {
                    btn.attr('href', button.link || '#');
                    btn.find('img').attr('src', button.icon || 'default-icon.png');
                    btn.find('span').text(button.text || `Button ${index + 1}`);
                }
            });
        }
    });

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

Code from JSON file:

[
    {
        "id": "repo1",

        "buttons": [
            {
                "link": "exmpl.html",
                "icon": "exmpl.png",
                "text": "btn exmpl1"
            },
            {
                "link": "exmpl.html",
                "icon": "exmpl.png",
                "text": "btn exmpl2"
            },
            {
                
                "link": "exmpl.html",
                "icon": "exmpl.png",
                "text": "btn exmpl3"
            },
            {
                "link": "exmpl.html",
                "icon": "exmpl.png",
                "text": "btn exmpl4"
            }
        ]
    },

    {
        "id": "repo2",

        "buttons": [
            {
                "link": "exmpl.html",
                "icon": "exmpl.png",
                "text": "btn exmpl1"
            },
            {
                "link": "exmpl.html",
                "icon": "exmpl.png",
                "text": "btn exmpl2"
            },
            {
                "link": "exmpl.html",
                "icon": "exmpl.png",
                "text": "btn exmpl3"
            },
            {
                "link": "exmpl.html",
                "icon": "exmpl.png",
                "text": "btn exmpl4"
            }
        ]

    }
]

I tried renaming repo.buttons to repoId.buttons, but it didn't help (fixed the error in the console, but the problem remained)

Console error: Uncaught ReferenceError: repo is not defined

• javascript
• html
• jquery
• arrays
• button

Share Improve this question Follow asked Nov 21, 2024 at 15:27 ne slava marlowne slava marlow 1 9

• 2 "Uncaught ReferenceError: repo is not defined" - Which line of the code shown is producing this error? Can you provide a minimal reproducible example as a runnable code snippet (hard-coding known input data as needed) which demonstrates the problem? What debugging have you done with your browser's development tools? – David Commented Nov 21, 2024 at 15:31
• 1 I can only get that error with this code if the search param id doesn't match one in the data. – mykaf Commented Nov 21, 2024 at 15:40
• 1 Where are you expecting to find an error that the repoId was not found? What do you mean "the rest of the information is loaded"? Loaded where? – mykaf Commented Nov 21, 2024 at 15:46
• 1 For data.find(...), "if no values satisfy the testing function, undefined is returned" (per MDN). It won't throw an error. – mykaf Commented Nov 21, 2024 at 15:47
• 1 Then, again, you need to indicate which line is throwing the error, and perhaps include that alert (and relevant code) in the code here. Because this code can find the repoid. Perhaps there is another instance where it's not being found. – mykaf Commented Nov 21, 2024 at 15:54

 |  Show 4 more comments

1 Answer 1

Sorted by: Reset to default 0

Consider the following: https://jsfiddle.net/Twisty/vax2e167/

HTML

<div>
  <div class="d-flex justify-content-around mt-4">
    <a href="#" id="button-1" class="btn btn-primary">
      <img src="" alt="Icon" id="icon-button-1" /> <span>Button 1</span>
    </a>
    <a href="#" id="button-2" class="btn btn-primary">
      <img src="" alt="Icon" id="icon-button-2" /> <span>Button 2</span>
    </a>
    <a href="#" id="button-3" class="btn btn-primary">
      <img src="" alt="Icon" id="icon-button-3" /> <span>Button 3</span>
    </a>
    <a href="#" id="button-4" class="btn btn-primary">
      <img src="" alt="Icon" id="icon-button-4" /> <span>Button 4</span>
    </a>
  </div>
</div>

JavaScript

var myData =
  '[{"id":"repo1","buttons":[{"link":"exmpl.html","icon":"exmpl.png","text":"btn exmpl1"},{"link":"exmpl.html","icon":"exmpl.png","text":"btn exmpl2"},{"link":"exmpl.html","icon":"exmpl.png","text":"btn exmpl3"},{"link":"exmpl.html","icon":"exmpl.png","text":"btn exmpl4"}]},{"id":"repo2","buttons":[{"link":"exmpl.html","icon":"exmpl.png","text":"btn exmpl1"},{"link":"exmpl.html","icon":"exmpl.png","text":"btn exmpl2"},{"link":"exmpl.html","icon":"exmpl.png","text":"btn exmpl3"},{"link":"exmpl.html","icon":"exmpl.png","text":"btn exmpl4"}]}]'

$(function () {
  //var urlParams = new URLSearchParams(window.location.search);
  //var repoId = urlParams.get("id")
  var repoId = "repo2"
  $.post("/echo/json/", { json: myData }, function (data) {
    var repo = data.find((r) => r.id === repoId)
    if (repo.buttons && Array.isArray(repo.buttons)) {
      repo.buttons.forEach((button, index) => {
        var btn = $("#button-" + (index + 1))
        if (btn.length > 0) {
          btn.attr("href", button.link || "#")
          btn.find("img").attr("src", button.icon || "default-icon.png")
          btn.find("span").text(button.text || `Button ${index + 1}`)
        }
      })
    }
  })
})

In this example, <span> tags had to be added to the HTML to make your Script work properly. JSFiddle is a good way to test mock JSON as it has an Echo feature.

本文标签： javascriptI can39t add buttons with filling from JSON fileStack Overflow