Dynamically Add / Remove multiple input fields export JSON

Hello, I am creating dynamic input and textarea . Each package has an input and a textarea . and the user can create a maximum of 10.

I want to get the result of input and textarea as JSON but I can’t get it the way I want and I don’t know how to improve from this point.

The current JSON output is like this;

[
   {"name":"textbox2","value":"test #1"},
   {"name":"textareabox2","value":"test-textarea #1"},
   {"name":"textbox2","value":"test #2"},
   {"name":"textareabox2","value":"test-textarea #2"},
   {"name":"textbox3","value":"test #3"},
   {"name":"textareabox3","value":"test-textarea #3"}
]

What I want should be like this, How can I convert it to this? like this:

[

    {'input':'test #1',  'textarea' :'test-textarea #1'},
    {'input':'test #2',  'textarea' :'test-textarea #2'},
    {'input':'test #3',  'textarea' :'test-textarea #3'}

]

JSfiddle: Edit fiddle - JSFiddle - Code Playground

What is this? That is not an acceptable data type, in JS or JSON.

Hello @kevinSmith ,

Is it not possible to use the input and textarea parts as key in JSON, and the texts inside as value in JSON?

If you mean a : instead of a =>, then you can achieve this with a filter and map, or you could do it with a reduce. The second method would be “faster”, but the first method could be argued to be more readable.

Yes, absolutely. It would just be with a :, not =>. The latter is the notation for an arrow function. Firstly that is not a valid arrow function. But you can have functions as values in a JS object. But functions are not a valid JSON type (but maybe that does not matter here, if you’re converting to a JS object).

Please don’t edit things after we’re discussing them - it makes it very confusing for people trying to understand the discussion.

So, do you understand how to use filter and map?

It’s also not clear to me what you want here. Are all those values supposed to have 1, instead of 2? Are you looking to combine those elements together? Do you know they will always be adjacent?

If that is the case then perhaps the filter and map approach may not make sense. Since it is a odd application, a loop might make more sense.

I made the correction so that other people can better understand my question. Unfortunately I made the correction before I saw your post. I can restore the question to its previous state if you want.

Unfortunately I don’t know the JS language well and I can’t solve the problem I’m having.
cc @kevinSmith

No.

1 input and textarea are added with the add button. You can think of it as a set. Input and textarea are linked. Actually, my purpose is to create a FAQ entry.

Input will be the title of the question and textarea will be the text field of the answer to the question.

I thought JSON was the best way to be able to save it to the database.

Like this:

Btw, I asked this question on many sites, but unfortunately, I could not get an answer from any of them. :slight_smile:

We’re not really a “solve your problem” platform, this is a “help people learn” platform.

If you want to work with JS, then you should learn it. There is a button in the upper left, Visit the Curriculum.

And I still don’t know what you want - you have two “textbox2” names with different values. It’s not clear how that is supposed to handle.

I thought JSON was the best way to be able to save it to the database.

Sure, that is a great way to store data. You can store JS object data in JSON to make it easier to store in a file, etc. You can’t have true JSON in JS but you can have a JSON encoded string. But we have to remember that JSON is a subset of a JS object - all JSON objects can be converted to a JS object, but not all JS objects cannon necessarily be converted to a JSON object.

But at the very least, this should be easily solvable with a for loop.

I wrote the following in response to your question: “Unfortunately, I don’t know the JS language well and I can’t solve the problem I’m having.”

I didn’t tell you or anyone to solve my problem. I think you misunderstood. I just wanted help.


I added a drawing picture above so that maybe the image can explain it better. I guess you didn’t see it.

I just intend to have “input” and “textarea” in the same parentheses in the JSON file because it is a requirement as it is a Q&A. Thank you for your interest.

OK, then, go to Visit the Curriculum and go to the “JavaScript Algorithms and Data Structures” and learn the basics of JS. This is a pretty simple JS problem, if you understand JS objects, JS arrays, and how loops work.

Learn that, and give it a go. If your attempt doesn’t work, post it and we’ll try to help you figure out why it doesn’t work.

Could you please delete this question?

We usually do not just delete threads especially not if someone has taken the time to help and because they may contain helpful information to others.

Did you not get anything useful out of the thread so far?


Not so sure using serializeArray is the best way to do this if you need the element types.

Sure you will know what the type is based on its position in the array, input is even, and textarea is odd. So you can do it using a map by checking if the index is even or odd and creating a new object with the keys and value you want.

But that does seem like a poor abstraction to rely on. I might look into using the FormData API instead.

As said we are here to teach so just posting solution code isn’t really the main purpose of the forum, but here is a very crude example of what I mean by using the index just in case it’s unclear. I’m sure it can be improved or be done differently. I may also have misunderstood what you are trying to do.
https://jsfiddle.net/c8fqgsLw/

By the way, the elements must have a name attribute for serializeArray to work and your starting elements do not.

Thank you for taking the time to develop the code. Your code is not complex, it is simple and efficient. In this way, it is better understood and learned.

No, that’s right. That’s exactly what I thought.
Regards

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.