How to modify a json object?

Question

Is it possible to get the src from an img tag? I have an object that I need to remove image tag value example

Input is this

[

    {
        "N": "ABC corp",
        "a": "<img src=\"/img/samples/flag_red.gif\" alt=\"red\" height=\"16\" width=\"16\" border=\"0\"/>",
        "c": "<img src=\"/img/samples/flag_red.gif\" alt=\"red\" height=\"16\" width=\"16\" border=\"0\"/>",
        "r": "<img src=\"/img/samples/flag_green.gif\" alt=\"green\" height=\"16\" width=\"16\" border=\"0\"/>",
        "p": "<img src=\"https://a.na7.visual.force.com/resource/1260007793000/a/iconset/gray.gif\" alt=\" \" height=\"16\" width=\"1\" border=\"0\"/>"

    }
]

The output that I want is this

[
    {
        "N": "3M",
        "a": "red",
        "c": "red",
        "r": "red",
        "p": "gray"

    },

    {
        "N": "ABC corp",
        "a": "red",
        "c": "red",
        "r": "green",
        "p": "gray"

    }
]

How can I create this new object from the given input object if it the property value that I want is in the src attribute of the img tag? I need to check the src attribute of the img tag in the input object properties. If it is flag_red.gif then the value in the output object should be red . If it is flag_green.gif then the value in the output object should be green . If it is gray.gif then the value in the output object should be grey .

Answer 1

The following shows you how to modify your data relying on the alt attributes of the image tags, giving you the general idea. With little effort you can easily modify this to use the src attribute with modifications instead.

var data = [{
    "N": "3M",
        "a": "<img src=\"/img/samples/flag_red.gif\" alt=\"red\" height=\"16\" width=\"16\" border=\"0\"/>",
        "c": "<img src=\"/img/samples/flag_red.gif\" alt=\"red\" height=\"16\" width=\"16\" border=\"0\"/>",
        "r": "<img src=\"/img/samples/flag_red.gif\" alt=\"red\" height=\"16\" width=\"16\" border=\"0\"/>",
        "p": "<img src=\"https://a.na7.visual.force.com/resource/1260007793000/a/iconset/gray.gif\" alt=\" \" height=\"16\" width=\"1\" border=\"0\"/>"

}, {
    "N": "ABC corp",
        "a": "<img src=\"/img/samples/flag_red.gif\" alt=\"red\" height=\"16\" width=\"16\" border=\"0\"/>",
        "c": "<img src=\"/img/samples/flag_red.gif\" alt=\"red\" height=\"16\" width=\"16\" border=\"0\"/>",
        "r": "<img src=\"/img/samples/flag_green.gif\" alt=\"green\" height=\"16\" width=\"16\" border=\"0\"/>",
        "p": "<img src=\"https://a.na7.visual.force.com/resource/1260007793000/a/iconset/gray.gif\" alt=\" \" height=\"16\" width=\"1\" border=\"0\"/>"

}];

var modified = data.reduce(function (outArr, entry) {
    var outObj = {};
    for (key in entry) {
        if (entry.hasOwnProperty(key)) {
            var item = entry[key];
            var node = document.createElement("div");
            node.innerHTML = item;
            var img = node.querySelector("img");
            outObj[key] = img ? img.alt : item;
        }
    }
    outArr.push(outObj);
    return outArr;
}, []); //[{"N":"3M","a":"red","c":"red","r":"red","p":" "},{"N":"ABC corp","a":"red","c":"red","r":"green","p":" "}]

Answer 2

You just need to check for <img> tag and if it is matching then take substring to get the file name and set it back to the JSON .

Working Plunker

var obj=[
{
    "N": "3M",
    "a": "<img src=\"/img/samples/flag_red.gif\" alt=\"red\" height=\"16\" width=\"16\" border=\"0\"/>",
    "c": "<img src=\"/img/samples/flag_red.gif\" alt=\"red\" height=\"16\" width=\"16\" border=\"0\"/>",
    "r": "<img src=\"/img/samples/flag_red.gif\" alt=\"red\" height=\"16\" width=\"16\" border=\"0\"/>"
},
{
    "N": "ABC corp",
    "a": "<img src=\"/img/samples/flag_red.gif\" alt=\"red\" height=\"16\" width=\"16\" border=\"0\"/>",
    "c": "<img src=\"/img/samples/flag_red.gif\" alt=\"red\" height=\"16\" width=\"16\" border=\"0\"/>",
    "r": "<img src=\"/img/samples/flag_green.gif\" alt=\"green\" height=\"16\" width=\"16\" border=\"0\"/>"
}
];

for(var k in obj){
    for (name in obj[k]) {
        if(obj[k][name].indexOf("<img") != -1) {
            // I have made logic based on "flag_", this can be change as per your requirement.
            var src= obj[k][name].substring(obj[k][name].indexOf("flag_")+5,obj[k][name].indexOf(".gif"));
            obj[k][name]=src;
        }
    }
}