jQuery - Get value from JSON Stringify

Question

I have a form, that I need to get the values from:

var formConfig = JSON.stringify($("#bookingform").serializeArray());

which returns below:

[{"name":"client_id","value":"1"},{"name":"consignee_id","value":""},{"name":"client","value":"DAKO"},{"name":"model","value":"2"},{"name":"type","value":"2"},{"name":"temperatur","value":"2"},{"name":"shipper_labels","value":"1"},{"name":"batteri_labels","value":"1"},{"name":"batteri_number","value":"2222"},{"name":"pickup","value":"April 27, 2017 18:25"},{"name":"intern_marks","value":"fdsfads"},{"name":"extern_marks","value":"sadsfdsf"},{"name":"consignee","value":""},{"name":"marks","value":""}]

I then need to access above values from the JSON string, which I am using this function to:

var confirmBooking = function(element, setting, correct, notcorrect) {
    $('.confirm-booking')
    .find(element)
    .html(setting === 1 ? correct : notcorrect);
};

The thought is, I can use above function:

confirmBooking('.config_batteri', formConfig.client_id, "Yes", "No");

and so on..

formConfig.client_id should return 1, since that's the value in the JSON string above.

However it returns undefined:

console.log(formConfig.client_id); // Returns "undefined"

Decent Dabbler · Accepted Answer · 2017-04-23T12:04:53.100

3

You need to use JSON.parse(), to make it a regular JavaScript object again.

What JSON.stringify() does is, as the name implies, make it a string. That is just a regular string, that represents JSON data. It doesn't magically have the JSON data properties.

Furthermore serializeArray() returns an array of {name: ..., value: ...} objects. If you didn't turn it into a JSON string, the result still could not easily be accessed by doing formConfig.client_id. You'd have to loop through the formConfig array, to find the desired name/value pair.

From the looks of it, you don't need to turn the JavaScript object into JSON at all, if you are just going to use it in the same script (unless you are going to send the JSON string somewhere else perhaps).

Based on OP's comments, I'm assuming OP just want to access a particular form element's value. Using jQuery, this can easily be accomplished with:

// get the value of the client_id element (assuming it's an input element)
var client_id = $( '#bookingform input[name="client_id"]' ).val();
// call the function
confirmBooking( '.config_batteri', client_id, "Yes", "No" );

If you want to have an object with all the form values, have a look at the answers in this question.

edited Apr 23 '17 at 12:04

answered Apr 23 '17 at 11:42

Decent Dabbler

22,532
8
74
106

So, first JSON.stringify the data from the form, and then use JSON.parse()? Would you mind including an example? I still get undefined. – oliverbj Apr 23 '17 at 11:48
After edit: correct, I don't need to send the data elsewhere. I just want to create an "easy" way to access all the data in my form, and use it. Is there a better way of achieving that? – oliverbj Apr 23 '17 at 11:53
@oliverbj Ah okay, I see. Yes I'll expand my answer to give you an example – Decent Dabbler Apr 23 '17 at 11:55
Thanks a lot! Really means a lot – oliverbj Apr 23 '17 at 11:55
@oliverbj I've added a simple example of how you can access a single form value at a time (assuming it's unique `` elements). For more complex operations I've linked to a relevant question. – Decent Dabbler Apr 23 '17 at 12:06

score 1 · Answer 2 · edited Oct 02 '18 at 02:01

1

I think that's what you want.

console.log(formConfig.confirmBooking);

edited Oct 02 '18 at 02:01

Pang

9,564
146
81
122

answered Apr 23 '17 at 11:47

srashtisj

151
4
19

No, I want to access the data from the "JSON" string. – oliverbj Apr 23 '17 at 11:47
1

console.log(formConfig[0].name); – srashtisj Apr 23 '17 at 11:50

score 1 · Answer 3 · edited Aug 31 '17 at 21:23

Do this:

var jsonStr = '[{"name":"client_id","value":"1"},
                {"name":"consignee_id","value":""},
                {"name":"client","value":"DAKO"},
                {"name":"model","value":"2"},
                {"name":"type","value":"2"},
                {"name":"temperatur","value":"2"},
                {"name":"shipper_labels","value":"1"},
                {"name":"batteri_labels","value":"1"},
                {"name":"batteri_number","value":"2222"},
                {"name":"pickup","value":"April 27, 2017 18:25"},
                {"name":"intern_marks","value":"fdsfads"},
                {"name":"extern_marks","value":"sadsfdsf"},
                {"name":"consignee","value":""},
                {"name":"marks","value":""}]';

var obj = JSON.parse(jsonStr);
var val = obj[0].value;

The reason you can't do obj[0].name is because your parsed JSON object has a collection of objects, where the first object has this structure:

{
    name:"client_id",
    value:"1"
}

So, you have to access it using obj[0].value NOT obj[0].name as it would give you client_id.

score 0 · Answer 4 · answered Apr 23 '17 at 11:44

0

would change of syntax help? please try

console.log(formConfig[0]['client_id']);

I hope it works for you

answered Apr 23 '17 at 11:44

Harj Sohal

121
1
3
12

Sorry, that still returns undefined. – oliverbj Apr 23 '17 at 11:47
apologies, I wonder if changing array position helps, if no then Decent Dabbler appraoch is best- console.log(formConfig[1]['client_id']); – Harj Sohal Apr 23 '17 at 12:03

Tilak Madichetti · Answer 5 · 2017-04-23T11:58:10.297

Since it's an array of objects, you target the first element which returns an object and then use the "value" property to get the actual value of 1 which you expected .

Also use parseInt("1") to get 1 as a type "number"

Hope this solves the issue ! Let me no ASAP

== EDIT

var formConfig = [{
    "name": "client_id",
    "value": "1"
}, {
    "name": "consignee_id",
    "value": ""
}, {
    "name": "client",
    "value": "DAKO"
}];

// This function returns the value for the name
function search(str) {

    for (var obj of formConfig) {
        if (obj.name == str) {
            return obj.value;
        }
    }
}

search("client_id"); // 1
search("client"); // DAKO

Would it be possible to make it so I wouldn't have to use formConfig[**number**].value ? But instead, use formConfig[**name**] ? — oliverbj, Apr 23 '17 at 11:50

jQuery - Get value from JSON Stringify

5 Answers5

Linked