How to convert large JSON string into array with JQuery

Question

I have a JSON string that looks like this:

[
    {
        "id": "acbPreviewCell",
        "width": 80
    },
    {
        "id": "advName",
        "width": 170
    },
    {
        "id": "adHeadline",
        "width": 150
    },
    {
        "id": "adSize",
        "width": 150
    },
    {
        "id": "adProduct",
        "width": 150
    },
    {
        "id": "adCategory",
        "width": 150
    },
    {
        "id": "adSection",
        "width": 150
    },
    {
        "id": "adColor",
        "width": 150
    },
    {
        "id": "adTags",
        "width": 150
    },
    {
        "id": "adRegions",
        "width": 150
    },
    {
        "id": "adStatus",
        "width": 150
    },
    {
        "id": "adCreated",
        "width": 150
    },
    {
        "id": "adBookingNb",
        "width": 150
    },
    {
        "id": "adPickup",
        "width": 150
    },
    {
        "id": "folioMeta",
        "width": 150
    }
]

To help explain further, each of these entries is the ID of a table header, along with the width of that table header. I'm using it within an application so that I can remember a user's custom column width that they set.

I would like to break this JSON string down into a javascript array, so that I can easily access each ID and it's width.

Any help would be appreciated with setting it up as an array and then breaking it down to access the ID and the width. Thank you!

See here: http://stackoverflow.com/questions/23310353/how-to-read-json-result-in-jquery/23310376#23310376 — toesslab, Sep 10 '14 at 14:46
Where is the string stored? It syntactically already *is* a JavaScript array. — Pointy, Sep 10 '14 at 14:46
Sounds like maybe a hash keyed on the `id` values would be more useful. — John Hascall, Sep 10 '14 at 14:48
Are you asking [How to parse JSON in JavaScript](http://stackoverflow.com/questions/4935632/how-to-parse-json-in-javascript)? or how to [Access / process (nested) objects, arrays or JSON](http://stackoverflow.com/q/11922383/710446)? — apsillers, Sep 10 '14 at 14:49

score 2 · Accepted Answer · answered Sep 10 '14 at 14:53

If you want to convert it to an array you can use the built-in JSON object to parse it: JSON.parse(yourString).

But if you want to easily access values by ID, you will have to actually convert it to an object:

var originalData = JSON.parse(yourString);
var parsedData = {};
for (var i = 0, l = originalData.length; i < l; i++) {
    parsedData[originalData[i].id] = originalData[i].width;
}

// now you can easily access the wanted widths
var acbPreviewCellWidth = parsedData['acbPreviewCellWidth'];

score 1 · Answer 2 · answered Sep 10 '14 at 15:05

Someone else mentioned a hashed map, which is pretty much what I'm guessing you need. That is to say, you want to access by id quickly as in array['advName'] gives you the width there.

You could mill through the values you get like so:

a = [
    {
        "id": "acbPreviewCell",
        "width": 80
    },
    {
        "id": "advName",
        "width": 170
    },
    {
        "id": "adHeadline",
        "width": 150
    }
];

function rewrite_array(arr){
    new_arr = new Array();
    for( i=0; i<a.length; i++){
        new_arr[arr[i]['id']] = arr[i]['width'];
    }
    return new_arr;
}

n = rewrite_array(a);
console.log(n["advName"]);
console.log(a[1]['width']);

score 0 · Answer 3 · answered Sep 10 '14 at 14:51

0

In theory, it already is stored as an array. However, if you would like to parse the JSON object to ensure that it is properly formed, use var jsonArray = JSON.parse(jsonString); No jQuery is needed.

answered Sep 10 '14 at 14:51

Peter Maidens

443
1
6
11

score 0 · Answer 4 · answered Sep 10 '14 at 14:51

0

Use jQuery.parseJSON(jsonString)

answered Sep 10 '14 at 14:51

Mihir

419
3
10

score 0 · Answer 5 · answered Sep 10 '14 at 14:53

You might want to get the JSON using ajax, and then loop through all the values lushing them to an array in javascript, or you can simply call var objArr = $.parseJSON('file'); to get an array of all the objects. If you want to fet the values, you van simply get them using objArr[index].val.

Using this you can call, for instance, the first objects values like this.

var id = objArr[0].id;
var width = objArr[0].width;

guest271314 · Answer 6 · 2014-09-10T15:07:41.780

0

Try

function filtered(v) {
  return $.map(json, function(value) {
    return value.id === v ? value : null
  })[0];
};

usage

filtered("folioMeta"); // do stuff with "folioMeta" object within array
filtered("folioMeta").id // `"folioMeta"`
filtered("folioMeta").width // `150`

edited Sep 10 '14 at 15:07

answered Sep 10 '14 at 15:00

guest271314

1
15
104
177

How to convert large JSON string into array with JQuery

6 Answers6