Marco Maffei Marco Maffei - 3 months ago 8
Javascript Question

Dynamically add some values inside a javascript object or a json file with jquery

I want to add some text inside my json file. My file looks like that:

{
"a": "Store Name",
"b": "Address",
"c": "Town/City",
"d": "Prov",
"e": "Postal Code",
"f": "Phone",
"g": "Website",

},
{
"a": "Nutter's Bulk Foods #50",
"b": "102-400 Main Street",
"c": " N.E.",
"d": "Airdrie",
"e": "AB",
"f": "T4B 2N1",
"g": "(403) 948-6354",

},
{
"a": "King Drug Hinton 1982 Ltd.",
"b": "145 Athabasca Avenue",
"c": "Hinton",
"d": "AB",
"e": "T7V 2A4",
"f": "(780) 865-2645",
"g": "http://www.kingdrug.ca/",

},


and so on.
I want to add some text (inside an html tags) inside a single value in order to dynamically change my file into:

{
"a": "King Drug Hinton 1982 Ltd.",
"b": "145 Athabasca Avenue",
"c": "Hinton",
"d": "AB",
"e": "T7V 2A4",
"f": "<a href='tel:+1780..'>(780) 865-2645</a>",
"g": "<a href='http://www.kingdrug.ca/'>http://www.kingdrug.ca/</a>",

}


For example: let's say that I want to target the property name "a", retrieve the value "780..." and add an html anchor tag with the equal to the value inside the file. The biggest problem for me is working with a json file, I used to work and iterate with javascript object. Thank you in advance for any useful suggestion.

UPDATE:



Instead of using ajax call I can easily turn my json file into a javascript object to avoid the problem and make the process faster, so, let's say that I've got a file like that:

{
"html": '65 Simcoe St',
"title": 'The Farm To Table Market And Kitchen',
"lat": '44.501345',
"phone": '(705) 444-6200',
"website": 'ccfcoop.ca',
"lng": '-80.215064',
"postalcode": 'L9Y 1H5',
"city": 'Collingwood, ON, Canada'
},


I'm looking to create a file like that:

{
"html": '65 Simcoe St',
"title": 'The Farm To Table Market And Kitchen',
"lat": '44.501345',
"phone": '<a href="tel:+17054446200">(705) 444-6200</a>',
"website": '<a href="http://ccfcoop.ca/">ccfcoop.ca/</a>',
"lng": '-80.215064',
"postalcode": 'L9Y 1H5',
"city": 'Collingwood, ON, Canada'
},

Answer

Here is an example of how you can manipulate a JavaScript object:

var data = [{
    "html": '65 Simcoe St',
    "title": 'The Farm To Table Market And Kitchen',
    "lat": '44.501345',
    "phone": '(705) 444-6200',
    "website": 'ccfcoop.ca/',
    "lng": '-80.215064',
    "postalcode": 'L9Y 1H5',
    "city": 'Collingwood, ON, Canada'
}, // more objects could follow here
];

data.forEach( obj => {
    obj.phone = '<a href="tel:' 
        + (obj.phone.indexOf('+') == -1 ? '+1' : '')
        + obj.phone.replace(/\D/g, '') + '">' + obj.phone + '</a>';
    obj.website = '<a href="' 
        + (obj.website.indexOf(':') == -1 ? 'http://' : '') 
        + obj.website + '">' + obj.website + '</a>';
});

console.log(JSON.stringify(data, null, 2));

Note that in JSON string format, double quotes are escaped, because they appear within a double-quoted string.

This is just an example of how you could add hyperlink HTML to a telephone number and a URL. There could be other ways you want to convert such elements, depending on how they are originally formatted. But this should give you an idea.