0

Hello. I'm currently working on a small project and have the following issue that I can't seem to solve alone. I have attempted to search for a solution, with no luck. Admittedly, it doesn't help that I'm fairly new at JavaScript/jQuery, so I'm unsure of the "correct" search terms!

I have a JSON file that contains the following code:

var draft = {
    "title": "Title",
    "subtitle": "Subtitle",
    "image": "/image.jpeg",
}

I'm then retrieving the JSON data with the following line:

draft["title"];

Based upon what the application is required to achieve - is there a way to access the JSON data using the value of a variable in place of "draft"? I have an AJAX function that is pulling the file name and extension of the JSON file, and then the following line of code that is refining the file name down to one word by removing the slashes, numbers, hyphens, and file extension:

var fileNameRefined = fileName.replace("/", "").replace(/\d+|-/g, "").replace(".json", "");

As a result, the "fileNameRefined" variable will contain the value "draft". This outputs to the console as expected. That said, it won't work with the JSON. I was hoping that the following lines of code would work in the exact same way:

draft["title"];
fileNameRefined["title"]; // var fileNameRefined = draft

Unfortunately, the resulting data is returned as "undefined". I'm assuming the application is treating the name of the variable as a string as opposed to passing the variable's value? I'm not sure.

Does anybody have a solution to this? Any help would be greatly appreciated.

Thanks, all.

Dexygen
  • 12,287
  • 13
  • 80
  • 147
  • 2
    Possible duplicate of ["Variable" variables in Javascript?](https://stackoverflow.com/questions/5187530/variable-variables-in-javascript) – CBroe Jan 08 '18 at 11:17
  • 'fileNameRefined' is just the file name and does not hold the contents of that file. –  Jan 08 '18 at 11:17
  • 2
    No.. No! This is scary and shouldn't be done! First that is *not* JSON, that is javascript! You can do what you're trying to do with AJAX if the file being loaded were *JSON* without having to do anything particularly fancy. I would *strongly* suggest you simply use JSON and `JSON.parse` to convert to a useable object in your code and abandon this folly! – Neil Jan 08 '18 at 11:19
  • Thanks, guys! I'll revise... –  Jan 08 '18 at 11:52
  • It's not jQuery either, Javascript and jQuery are not the same thing – Dexygen Jan 08 '18 at 12:02
  • Sure, but the rest of my code is jQuery. The solution could have been jQuery too, so I thought it would be worth mentioning. –  Jan 08 '18 at 12:04

1 Answers1

0

Could be done, SHOULDN'T be done.

Use JSON (This is JS object you presented) and its API. Here is example for jQuery, there are similar examples for other libs/frameworks.

I would always go with fw or lib here for a clear Ajax API over writing it yourself in vanilla.

Here is get JSON example in fiddle (not written by me): json get fiddle

function getSuccessOutput() {
    $.ajax({
        url:'/echo/js/?js=hello%20world!',
        complete: function (response) {
            $('#output').html(response.responseText);
        },
        error: function () {
            $('#output').html('Bummer: there was an error!');
        },
    });
    return false;
}

As for JSON api you will be interested in parsing the response using JSON.parse()

var obj = JSON.parse('{ "name":"John", "age":30, "city":"New York"}');
DanteTheSmith
  • 2,937
  • 1
  • 16
  • 31