Is it possible to extract the name of a nested arrays?

So Im trying to edit a document in Firestore, and in this modal i want show the documents current info. So I get this map of arrays from the document.

{ "electrolux": [ "model1", "model2" ], "bosch": [ "model1", "model2", "model3", "model4" ] }

Im trying to pre-fill my dynamic input fields with this, but I can not for the life of me understand how I can extract the name of each array since they can be named anything.

so my question is, is there a way to map through the above map to generate the dynamic fields and get the name of the array in the first input and the contents of that same array in the second field?

This is the current code Im running

const [passarTill, setPassarTill] = useState([{ brand: "", models: [] }]);

// handle input change from Brand field
const handleInputChange = (e, index) => {
    const name = e.target.name.toLowerCase();
    const value = e.target.value.toLowerCase();
    const list = [...passarTill];
    list[index][name] = value;
    setPassarTill(list);
};

// handle input change from Models
const handleArrayChange = (e, index) => {
    const name = e.target.name;
    let value = e.target.value.replace(/s+/g, "-").toLowerCase().split(",");
    const list = [...passarTill];
    list[index][name] = value;
    setPassarTill(list);
};

// handle click event of the Remove button
const handleRemoveClick = (index) => {
    const list = [...passarTill];
    list.splice(index, 1);
    setPassarTill(list);
};

// handle click event of the Add button
const handleAddClick = () => {
    setPassarTill([...passarTill, { brand: "", models: [] }]);
};

Here is the code that renders the dynamic inputs

{passarTill.map((x, i) => {
      return (
        <div key={i}>
          <div className="flex flex-wrap">
            <label className="w-4/12">
              <p className="w-4/12">Tillverkare</p>
              <input
                className="border w-11/12 p-1.5"
                name="brand"
                placeholder="T.ex. Electrolux"
                value={x.tillverkare}
                onChange={(e) => handleInputChange(e, i)}
              />
            </label>
            <label className="w-6/12">
              <p className="w-full">
                Modeller (separera endast med kommatecken ",")
              </p>
              <input
                className="border w-full p-1.5"
                name="models"
                value={x.modell}
                onChange={(e) => handleArrayChange(e, i)}
              />
            </label>
            <div className="flex flex-auto items-end justify-end">
              {passarTill.length !== 1 && (
                <button
                  className="text-xs w-18 p-2.5 bg-gray-300"
                  onClick={() => handleRemoveClick(i)}
                >
                  Radera
                </button>
              )}
              {passarTill.length - 1 === i && (
                <button
                  className="text-xs w-18 py-2.5 px-2 ml-1 bg-gray-300"
                  onClick={handleAddClick}
                >
                  Lägg till
                </button>
              )}
            </div>
          </div>
        </div>
      );
    })}

Answer

To access both the key and the value of each entry in the object, use Object.entries.

let appliances = { "electrolux": [ "model1", "model2" ], "bosch": [ "model1", "model2", "model3", "model4" ] };

let outputArray = [];

Object.entries(appliances).forEach(([brandName, modelsArray]) => {
  
  console.log(brandName); //electrolux
  
  console.log(modelsArray); //["model1", "model2"]

  outputArray.push({
    brand: brandName,
    models: modelsArray
  });
}

console.log(outputArray); // [ {"brand": "electrolux", "model": [ "model1", "model2" ]}, { "brand": "bosch", "model": [ "model1", "model2", "model3", "model4" ]} ]

Explanation:

With Object.entries, each entry is accessed as an array of [key, value].

Iterate through the entries with forEach.

Using the appliances object, the value of [brandName, modelsArray] at each iteration will be:

  • ["electrolux", ["model1", "model2"]]

  • ["bosch", ["model1", "model2", "model3", "model4"]]

The format of your initial state ([{ brand: "", models: [] }]) is an array of objects.

At each iteration, push a { brand: brandName, models: modelsArray } object into your output array.

Your final output array would then be in the following format:

[
 //first object
 {
  "brand": "electrolux",
  "model": [ "model1", "model2" ]
 },
 //second object
 {
  "brand": "bosch",
  "model": [ "model1", "model2", "model3", "model4" ]
 }
]

To better understand an object literal and view it in a structured format, you could use a JSON formatter. It will also enable you to check the validity of your format.