如何修改一個json對象？

Question

是否可以從img標簽中獲取src ？ 我有一個對象，我需要刪除圖像標記值示例

輸入是這個

[

    {
        "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\"/>"

    }
]

我想要的輸出是這個

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

    },

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

    }
]

如果我想要的屬性值在img標簽的src屬性中，我如何從給定的輸入對象創建這個新對象？ 我需要檢查輸入對象屬性中img標簽的src屬性。 如果是flag_red.gif則輸出對象中的值應該是red 。 如果是flag_green.gif則輸出對象中的值應該是green 。 如果它是gray.gif那么輸出對象中的值應該是gray 。

Answer 1

下面向您展示如何根據圖像標簽的alt屬性修改您的數據，讓您大致了解。 只需很少的努力，您就可以輕松地將其修改為使用src屬性進行修改。

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

您只需要檢查<img>標簽，如果匹配，則使用substring獲取文件名並將其設置回JSON 。

工作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;
        }
    }
}