Load JSON data instead of embedding it on page

Question

I am using Mention.js on my site, which populates a dropdown list of usernames when "@" is typed in an assigned textarea.

<textarea id="full"></textarea>

It's working great but the examples only show how to embed the JSON data on the actual page like this :

<script type="text/javascript">
    $(document).ready(function(){

        $("#full").mention({
            users: [{
                name: 'Rick Bahner',
                username: 'RickyBahner',
                image: 'http://placekitten.com/25/23'
            }, {
                name: 'Jacob Kelley',
                username: 'jakiestfu',
                image: 'http://placekitten.com/25/22'
            }, {
                name: 'John Doe',
                username: 'HackMurphy',
                image: 'http://placekitten.com/25/21'
            }, {
                name: 'Loud Mouth Burrito',
                username: 'Loudmouthfoods',
                image: 'http://placekitten.com/21/20'
            }]
        });

    });
</script>

I don't want to embed it, I have my JSON data stored in a separate file called myresults.json and I'd like to load that file instead.

I'm trying this but I don't think I'm doing it right as it's not working.

<script type="text/javascript">
    $(document).ready(function(){
        $("#full").mention({source: 'myresults.json'})
});

EDIT Here is my updated call, thanks to Eric :

<script type="text/javascript">
    $(document).ready(function(){
        $.getJSON('myresults.json', function(__data){
    $("#full").mention({source:__data.users})
});
});
</script>

But it's still not working so I've created a fiddle with both embedded and JSON load methods. Maybe somebody can work out why the JSON version isn't working?

Eric · Accepted Answer · 2015-08-26 14:24:45Z

3

You can load a JSON file this way:

    $.getJSON('sample.json', function(__data){
        $("#full").mention({source:__data})
    });

Edit to match your file:

$.getJSON('https://res.cloudinary.com/d3ep/raw/upload/v1440597312/myresults_yod9qs.json', function(__data){
    console.log(__data);
});

edited Aug 26, 2015 at 14:24

answered Aug 26, 2015 at 12:05

Eric

10.7k14 gold badges75 silver badges112 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Grant Over a year ago

Although I'm sure what you've written is correct it's still not working. If you look at the embedded <script> code you'll see that the json array is being wrapped in an option called 'users'. How would I formulate your code so that sample.json is wrapped in that option? ie: users: sample.json

Eric Over a year ago

{source:__data.users}, also you need to add quotes in JSON like {"users"':[{"name":"Rich"}] etc.

Grant Over a year ago

Yep my JSON is returning as you mentioned but it's still not working? <script type="text/javascript"> $(document).ready(function(){ $.getJSON('myresults.json', function(__data){ $("#ajax").mention({source:__data.users}) }); }); </script>

Eric Over a year ago

Please add your JSON data/document to you original post

Grant Over a year ago

Ahh I think I may have discovered the problem.. It looks like the script will only work if the JSON is formatted like this : name: 'Rick Bahner' where my json is returning "name:" "RickBahner"

|

Collectives™ on Stack Overflow

Load JSON data instead of embedding it on page

1 Answer 1

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related