Converting Javascript Multidimensional Array format

Question

I have an array that looks like this -

var myOldArray = [{
        "id": 1,
        "form_id": 4,
        "form_field_name": "field_1",
        "helperTitle": "This is Box 1's TItle",
        "helperText": "This is Box 1 data",
        "created_at": null,
        "updated_at": null
    },
    {
        "id": 2,
        "form_id": 4,
        "form_field_name": "field_2",
        "helperTitle": "Box 2 Title",
        "helperText": "Box 2 TExt",
        "created_at": null,
        "updated_at": null
    }
]

and I need to duplicate / copy / convert / ...whatever... that array to something like this -

myNewArray = {
  field_1['title'] = "This is Box 1's Title",
  field_1['text'] = "This is Box 1 data",
  field_2['title'] = "Box 2 Title",
  field_2['text'] = "Box 2 Text",
}

so that I can reference it by

  console.log(myNewArray.field_1.title)

or something more usable.

I have attempted to use the filter method to no avail. Everything I've attempted just returns undefined. I'm just super confused. Is there a better way to reference the elements in the sub array directly without converting?

This was sorta working... the console.log would output what I wanted but the returned value would output as undefined, which is confusing me.

myOldArray = [{
    "id": 1,
    "form_id": 4,
    "form_field_name": "field_1",
    "helperTitle": "This is Box 1's TItle",
    "helperText": "This is Box 1 data",
    "created_at": null,
    "updated_at": null
  },
  {
    "id": 2,
    "form_id": 4,
    "form_field_name": "field_2",
    "helperTitle": "Box 2 Title",
    "helperText": "Box 2 TExt",
    "created_at": null,
    "updated_at": null
  }
]
var AR = myOldArray;
var newArr = AR.filter(function(item) {
  if (item.form_field_name == fieldName) {
    console.log('txt - ' + item + '\n\n');
    return item;
  }
});

The posted question does not appear to include [any attempt](https://idownvotedbecau.se/noattempt/) at all to solve the problem. StackOverflow expects you to [try to solve your own problem first](https://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users), as your attempts help us to better understand what you want. Please edit the question to show what you've tried, so as to illustrate a specific roadblock you're running into a [MCVE]. For more information, please see [ask] and take the [tour]. — CertainPerformance, Jan 01 '19 at 10:09
btw, your `myNewArray` should be an object instead of an array, because you use named properties instead of keys. — Nina Scholz, Jan 01 '19 at 10:12
Yeah, I thought I'd used curly braces on the myNewArray, but I've been trying to solve this thing for like 6 hours... tiredness has kicked in... I fixed it. — Deadlance, Jan 01 '19 at 10:17
What's wrong (or not usable) with `myOldArray[0].helperTitle`? — Ben, Jan 01 '19 at 10:17
I dont know which array index I need when I output it. I need to reference specific indexes - IE, I need to output helperTitle for the index where form_field_name = field_2 and I wont know if that's index 0 or 1, or there may be 100 items in that array. — Deadlance, Jan 01 '19 at 10:19
@Deadlance Sounds like you really need to learn about data structures in JS a bit more.. — Ben, Jan 01 '19 at 10:22
@Ben I am working on learning as much as I can as quickly as I can for sure. This is just a weird issue I've been stuck on. I can't figure out how to get specific indexes of multidimensional arrays via key / value pair instead of their index. — Deadlance, Jan 01 '19 at 10:32

Nina Scholz · Accepted Answer · 2019-01-01T10:43:11.280

0

You could map the items in new objects with the wanted properties as objects.

It works with

mapping the objects of the array with Array#map,
taking the relevant properties with a destructuring assignment and make some renaming with object property assignment pattern [YDKJS: ES6 & Beyond],
return a new object with a computed property name field with another object with the renamed properties,
assigns all new objects to a single object with Object.assign and spread syntax ...

var data = [{ id: 1, form_id: 4, form_field_name: "field_1", helperTitle: "This is Box 1's TItle", helperText: "This is Box 1 data", created_at: null, updated_at: null }, { id: 2, form_id: 4, form_field_name: "field_2", helperTitle: "Box 2 Title", helperText: "Box 2 TExt", created_at: null, updated_at: null }],
    result = Object.assign(
        ...data.map(({ id, helperTitle: title, helperText: text }) =>
            ({ ['field_' + id]: { title, text } }))
    );

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

edited Jan 01 '19 at 10:43

answered Jan 01 '19 at 10:21

Nina Scholz

376,160
25
347
392

I'm having issues posting code in comments apparently... but I'm getting an error with the code you provided that says Can't convert undefined to object. – Deadlance Jan 01 '19 at 10:30
$.get('/api/system/formHelperText/4', function(data) { if(data) { this.helpText = data; } }.bind(this)); var X = this.helpText; console.log(X); result = Object.assign( ...X.map(({ id, helperTitle: title, helperText: text }) => ({ ['field_' + id]: { title, text } })) ); console.log(result); – Deadlance Jan 01 '19 at 10:34
it looks like an async problem, because of the `undefined` do you see the array in the console.log? can you take an item of the array? – Nina Scholz Jan 01 '19 at 10:37
@Deadlance don't you need to parse the JSON string to object – Slai Jan 01 '19 at 10:38
in my poorly formatted above code, the first console.log(X) does indeed output the array into the log, but the console.log(result) is producing the error – Deadlance Jan 01 '19 at 10:39
@Slai I don't think so. console.log(this.helpText[0].helperTitle); is outputting the proper string. The issue I'm having is, I don't want to output the string from [0]... I need to get the string for the index where form_field_name = a specific thing. – Deadlance Jan 01 '19 at 10:45
as i wrote, it could be an async propblem, where you process data which is not available at this moment. – Nina Scholz Jan 01 '19 at 11:04
@ninaScholz it does appear to be an async problem... Now to figure out how to fix that issue... – Deadlance Jan 01 '19 at 11:06
@deadlance https://stackoverflow.com/questions/23667086/why-is-my-variable-unaltered-after-i-modify-it-inside-of-a-function-asynchron – Jonas Wilms Jan 01 '19 at 11:15

score 0 · Answer 2 · answered Jan 01 '19 at 11:16

I am guessing all of the processing should be in the $.get function :

$.getJSON('/api/system/formHelperText/4', function (data) { 
    var myNewArray = data.map(function(item) {
        var obj = {};
        obj['field_' + item.id] = { Title: item.helperTitle, Text: item.helperText };
        return obj;
    });
    console.log(myNewArray);
};

score 0 · Answer 3 · answered Jan 01 '19 at 13:40

You can write a simple reduce call to get the desired output:

const array=[{id:1,form_id:4,form_field_name:"field_1",helperTitle:"This is Box 1's TItle",helperText:"This is Box 1 data",created_at:null,updated_at:null},{id:2,form_id:4,form_field_name:"field_2",helperTitle:"Box 2 Title",helperText:"Box 2 TExt",created_at:null,updated_at:null}]

const result= array.reduce((acc, a) => 
  (acc[a.form_field_name] = {title: a.helperTitle,text: a.helperText}, acc), {});

console.log(result);

score 0 · Answer 4 · answered Jan 01 '19 at 14:19

0

The answer is very simple:

const objs = new Map();

for (const obj of myOldArray) {
    objs.set(obj.form_field_name, obj);
}

And now you can access your objects by the field name:

const myObj = objs.get("field_1");

answered Jan 01 '19 at 14:19

Lucio Paiva

19,015
11
82
104

Converting Javascript Multidimensional Array format

4 Answers4