How to load a text file inside a JSON object within a Javascript function

Question

I have an autocomplete function :-

  $(document).ready(function () {
  $('input.autocomplete').autocomplete({

    data: {

The data JSON object will be responsible for giving the associated autocomplete values, the JSON key will be the autocomplete suggestions, and the JSON value will be null.

I don't want to manually enter values inside this JSON data like:-

data:{
    "Chocolate": null, 
    "Cake": null, 
    "Icecream": null, 
    "Pudding": null }

Instead, I want to fetch the JSON values from a text file, which will have these contents, so that I can just load the text file for this data JSON object, instead of having to manually enter it.

So, the list.txt file will have:-

           "Chocolate": null, 
            "Cake": null, 
            "Icecream": null, 
            "Pudding": null,
             "Cream:null

And I want to call this list.txt file inside JSON object data, something like:-

data: {
$.get('list.txt') }

How can I achieve this?

Are you using a server-side technology such as PHP? Also -- won't you have to manually enter the values into the text file? — Jacob Mattison
– Jacob Mattison, Commented Sep 14, 2017 at 15:54
@JacobMattison Actually I am using a bash script to add the semicolons and null, in the text file I will just have the names, and the script will convert it into JSON type text. — Dhiraj
– Dhiraj, Commented Sep 14, 2017 at 16:34

Jino Shaji · Accepted Answer · 2017-09-14 17:12:20Z

1

Try the below code. Read data from text file with ajax call and convert it into json object. It will work, but slight modification is needed with your text file as follows.

{
"Chocolate": "null", 
"Cake": "null", 
"Icecream": "null", 
"Cream":"null"
}

And your code will be as follows.

$(document).ready(function() {
    $.ajax({
        url : "list.txt",
        dataType: "text",
        success : function (data) {
            $(".text").html(data);
            var jsonData = JSON.parse(data);
        }
    });
});

If you don't want to modify the existing text file the below code will work.

$(document).ready(function() {
        $.ajax({
            url : "list.txt",
            dataType: "text",
            success : function (data) {
                $(".text").html(data);
                var jsonData = JSON.parse("{"+data+"}");

                 $('input.autocomplete').autocomplete({
                     data:jsonData 
                 });  //to initialize autocomplete
            }
        });
    });

edited Sep 14, 2017 at 17:12

answered Sep 14, 2017 at 15:56

Jino Shaji

1,10114 silver badges28 bronze badges

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

7 Comments

Jino Shaji Over a year ago

Is this is your expected output?

Dhiraj Over a year ago

Thank you. But it does not work, I think it actually needs to be put it inside the autcomplete function - $('input.autocomplete').autocomplete({ data:{

Jino Shaji Over a year ago

For that get json data from the text file and store in in a global variable then pass that data inside autocomplete function. Try that also.

Jino Shaji Over a year ago

Or just consume data from text file and convert it into json outside autocomplete function then inside the success of ajax define that auto complete function and assign the json data to autocomplete's data.

Dhiraj Over a year ago

How can I consume data from text file, is it $.get('text.html')? converting JSON, is it using JSON.parse? Should I store this in a variable to call it inside success function?

|

Collectives™ on Stack Overflow

How to load a text file inside a JSON object within a Javascript function

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related