javascript - Append new Property to existing JSON object on click event using Jquery - Stack Overflow

admin管理员组

文章数量:1415028

I am trying to append value from a input field into an existng JSON object and I keep getting errors.

Here is my code:

$('#addObjectBtn').click(function() {
            //Inject Property into current object
            var newObjName = $('#newObjectName').val();
            var newObjType = $('#newObjectType').val();
            objStr.View[newObjType + "_100"] = {"BackgroundImage":'""' + newObjName + '""'};
            $('#newObjectPrompt').dialog('close');
        })

EDIT: ADD JSON Object. I am trying to add for example another Button. Which would be "Button_100" in my example

{
    "View": {
        "Name": "Untitled3",
        "ImportWidth": 320,
        "ImportHeight": 480,
        "Image_1": {
            "BackgroundImage": "Image.png",
            "Position": [0, 0],
            "Width": 320,
            "Height": 480
        },
        "Button_1": {
            "BackgroundImage": "ButtonTop.png",
            "Position": [61, 83],
            "Width": 217,
            "Height": 58
        },
        "Button_2": {
            "BackgroundImage": "ButtonBottom.png",
            "Position": [81, 114],
            "Width": 205,
            "Height": 73
        },
        "TextField_1": {
            "BackgroundImage": "TextFieldLogin.png",
            "Position": [102, 336],
            "Width": 189,
            "Height": 31
        },
        "Label_1": {
            "Position": [137, 100],
            "Width": 54,
            "Height": 20,
            "Text": "HiRob",
            "FontSize": 18,
            "Color": [0, 0, 0, 1]
        },
        "Label_2": {
            "Position": [43, 342],
            "Width": 72,
            "Height": 20,
            "Text": "LogOut:",
            "FontSize": 18,
            "Color": [0, 0, 0, 1]
        },
        "Label_3": {
            "Position": [115, 234],
            "Width": 126,
            "Height": 20,
            "Text": "AnotherButton",
            "FontSize": 18,
            "Color": [0, 0, 0, 1]
        }
    }
}

I am trying to append value from a input field into an existng JSON object and I keep getting errors.

Here is my code:

$('#addObjectBtn').click(function() {
            //Inject Property into current object
            var newObjName = $('#newObjectName').val();
            var newObjType = $('#newObjectType').val();
            objStr.View[newObjType + "_100"] = {"BackgroundImage":'""' + newObjName + '""'};
            $('#newObjectPrompt').dialog('close');
        })

EDIT: ADD JSON Object. I am trying to add for example another Button. Which would be "Button_100" in my example

{
    "View": {
        "Name": "Untitled3",
        "ImportWidth": 320,
        "ImportHeight": 480,
        "Image_1": {
            "BackgroundImage": "Image.png",
            "Position": [0, 0],
            "Width": 320,
            "Height": 480
        },
        "Button_1": {
            "BackgroundImage": "ButtonTop.png",
            "Position": [61, 83],
            "Width": 217,
            "Height": 58
        },
        "Button_2": {
            "BackgroundImage": "ButtonBottom.png",
            "Position": [81, 114],
            "Width": 205,
            "Height": 73
        },
        "TextField_1": {
            "BackgroundImage": "TextFieldLogin.png",
            "Position": [102, 336],
            "Width": 189,
            "Height": 31
        },
        "Label_1": {
            "Position": [137, 100],
            "Width": 54,
            "Height": 20,
            "Text": "HiRob",
            "FontSize": 18,
            "Color": [0, 0, 0, 1]
        },
        "Label_2": {
            "Position": [43, 342],
            "Width": 72,
            "Height": 20,
            "Text": "LogOut:",
            "FontSize": 18,
            "Color": [0, 0, 0, 1]
        },
        "Label_3": {
            "Position": [115, 234],
            "Width": 126,
            "Height": 20,
            "Text": "AnotherButton",
            "FontSize": 18,
            "Color": [0, 0, 0, 1]
        }
    }
}

• javascript
• jquery
• json
• object

Share Improve this question Follow edited Jan 20, 2013 at 17:49 Rob asked Jan 20, 2013 at 17:41 RobRob 11.5k1010 gold badges4040 silver badges5656 bronze badges 5

• If only we knew what the errors were! – Pointy Commented Jan 20, 2013 at 17:43
• It would be better if you know what error message is it. You can try to debug by showing the value of objStr object on the UI. Are you sure it has the property 'View', and the 'objStr.View' is an object or maybe it's a string or number? Another tip to show the error on the mobile webview: try{} catch(e){alert(e)} – Blue Smith Commented Jan 20, 2013 at 18:16
• Change {"BackgroundImage":'""' + newObjName + '""'} to this - { BackgroundImage : newObjName }, mentioned in the answer below – Om Shankar Commented Jan 20, 2013 at 18:27
• @BlueSmith I am able to target ImportWidth by using objStr.View. ImportWidth. so I assume it should be accessible – Rob Commented Jan 20, 2013 at 18:27
• @OmShankar typo.. I am able to target ImportWidth by using objStr.View. ImportWidth. so I assume it should be accessible – Rob Commented Jan 20, 2013 at 18:33

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

newObjType is already a string, you don't need all those quotes. Try like this:

objStr.View[newObjName + "_100"] = {BackgroundImage: newObjType};

Try

objStr.View[newObjName + "_100"] = JQuery.phraseJSON('{"BackgroundImage":"' + newObjType +'"}');

Using phraseJSON is kind of round about, but it will definately get the job done, it converts a JSON string into a JS object.

EDIT: newObjType is already a string

Alternatively, without JQuery JSON.parse(string) can be used.

UPDATE:

In the absence of debugging tools on mobile, I would remend WEINRE. It gives you same console and other stuff in Desktop for application running on mobile

Also, looking at your ment, seems the error is somewhere else. You can optionally try this way of assigning

var newObjName = $('#newObjectName').val();
var newObjType = $('#newObjectType').val();
var tempObj = {"BackgroundImage": newObjName };
objStr.View[newObjType + "_100"] = tempObj;

---

OLD Answer:

I suppose the error is SyntaxError: Unexpected token :
And I suppose that is caused by {"BackgroundImage":'""' + newObjName + '""'};
And your way of setting property in the code is also erroneous

As a correction, I think you need to do 2 changes

Change your code from:

{"BackgroundImage":'""' + newObjName + '""'}

To

{ BackgroundImage : newObjName }

Cool, isn't it ??

本文标签： javascriptAppend new Property to existing JSON object on click event using JqueryStack Overflow