How to set javascript variables to json array elements?

Question

This is a sample of my Javascript code below. The main reason why I am writing this post is because I have a question about the last function, which is my GalleryImage function. There are four string variables inside that function. In each variable, I am supposed to store an element from the correspoding key in my JSON file's array. How do I do that? Underneath my javascript code is a sample of my JSON file code.

function GalleryImage(mJSON) {

    var locate = "";
    var description = "";
    var date = "";
    var url = "";
    //implement me as an object to hold the following data about an image:
    //1. location where photo was taken
    //2. description of photo
    //3. the date when the photo was taken
    //4. either a String (src URL) or an an HTMLImageObject (bitmap of the photo. https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement)
}

"images": [
        {
            "imgPath": "img/places/australia.jpg",
            "imgLocation": "Australia",
            "description": "Loch Ard Gorge",
            "date": "01/01/2016"
        },
        {
            "imgPath": "img/places/austria.jpg",
            "imgLocation": "Austria",
            "description": "Austrian chapel",
            "date": "01/02/2016"
        }

  ]
}

JSON is a notation format. If you do `var images = [` you will have a JS object. I assume that is what you really mean. Please create a [mcve] to explain the input and expected output — mplungjan, Apr 02 '18 at 14:08
@mplungjan Starting from that var images code is my JSON file, so it is JSON code. I just need to some how get each key from the images array into the variables inside the Javascript function I wrote. The variables will be strings. — italkapple, Apr 02 '18 at 14:11
It is useless as "JSON code" You will get a JS object or you need to use JSON.parse to make the string a JS object. — mplungjan, Apr 02 '18 at 14:45
Possible duplicate of [Access / process (nested) objects, arrays or JSON](https://stackoverflow.com/questions/11922383/access-process-nested-objects-arrays-or-json) — Biffen, Apr 02 '18 at 15:15

score -1 · Answer 1 · edited Apr 02 '18 at 14:09

-1

You can access the variables from the JS object array like you would do it in a dictionary:

element.variable

Example:

mJson.description

I hope my answer was helpful!

edited Apr 02 '18 at 14:09

mplungjan

169,008
28
173
236

answered Apr 02 '18 at 14:08

MarvMan

41
9

Okay. Thank you! – MarvMan Apr 02 '18 at 14:11
Does this access the key first though? I know you are accessing the element, but don't we have to access the key first? – italkapple Apr 02 '18 at 14:12
`element.variable` is the same as `element["variable"]`, so you are calling the key when you are calling `element.variable` – MarvMan Apr 02 '18 at 14:14
don't we have to parse it into a string or no? – italkapple Apr 02 '18 at 14:22
How did your answer get a dislike, I would assume yours is right. – italkapple Apr 02 '18 at 14:23
No, you don't have to parse it into a string, when you used the general Json parser before. The json parser does anything for you. – MarvMan Apr 02 '18 at 14:26
I dont know, why it got a dislike:( – MarvMan Apr 02 '18 at 14:26

score -1 · Answer 2 · answered Apr 02 '18 at 14:16

You can try this one:

debugger;
const images = [
        {
            "imgPath": "img/places/australia.jpg",
            "imgLocation": "Australia",
            "description": "Loch Ard Gorge",
            "date": "01/01/2016"
        },
        {
            "imgPath": "img/places/austria.jpg",
            "imgLocation": "Austria",
            "description": "Austrian chapel",
            "date": "01/02/2016"
        }
];

const GalleryImage = (props) => {
    return {
     locate : props.imgLocation,
     description :  props.description,
     date :  props.date,
     url :  props.imgPath ? props.imgPath : props.imgPath // Here is where you need to check if is a string or use the default bitmap
    };
}

const imagesParsed = images.map(props => GalleryImage(props));

Another option is trying to do it with a class but is basically the same concept.

How to set javascript variables to json array elements?

2 Answers2