展开运算符使用数组 forEach 循环将值动态复制到嵌套对象

Question

This is the code I made, its actually from the react project I am working on, where I wanted to add more key-value pairs under particular keys. So I made a similar sample code to know how to do it, but unfortunately, I can't find a solution on the internet. Please help

const filteredSearchItems=[{
  "id":"das",
  "value":45
},
{
  "id":"das3",
  "value":48
},
{
  "id":"das4",
  "value":47
},
{
  "id":"das5",
  "value":46
},

]
let savedFilter = "";
const savefilter = () => {
    const saveName = "fooCriteria";
    filteredSearchItems.forEach(item => {  
        if (!savedFilter) {
          savedFilter={ [saveName]: { [item.id]: item.value } };
        } else
          savedFilter={...savedFilter.saveName,...{
            ...savedFilter.saveName,
            ...{ [item.id]: item.value }
          }};
    });
  };
savefilter();

console.log("savedFilter :",savedFilter)

output

savedFilter : { das5: 46 }

My Expected output that I wanted

{ fooCriteria: { das: 45, das3: 48, das4: 47, das5: 46 } }

PS: I wanted to give fooCriteria as savename variable there is a reason. since the name of the object is determined by the user

const saveName = document.getElementById("seachSaveInput").value;

Answer 1

 const filteredSearchItems=[{"id":"das","value":45},{"id":"das3","value":48},{"id":"das4","value":47},{"id":"das5","value":46}]; let fooCriteria = filteredSearchItems.reduce((acc,{id,value})=>(acc[id]=value,acc),{}); console.log({fooCriteria})

You can use reduce method

Answer 2

instead of forEach reduce makes more sense.

 const filteredSearchItems = [ { 'id': 'das', 'value': 45 }, { 'id': 'das3', 'value': 48 }, { 'id': 'das4', 'value': 47 }, { 'id': 'das5', 'value': 46 } ]; const savedFilter = {}; const saveFilter = () => { const saveName = 'fooCriteria'; savedFilter[saveName] = filteredSearchItems.reduce((saved, item) => { saved[item.id] = item.value; return saved; }, savedFilter[saveName] || {}); }; saveFilter(); console.log('savedFilter :', savedFilter);

Answer 3

I'd do a shallow copy with spread notation:

// If you want to add to the [saveName] entry if it exists:
savedFilter = {...savedFilter, [saveName]: savedFilter ? {...savedFilter[saveName]} : {}};
// If you want to *replace* the [saveName] entry, not add to it:
savedFilter = {...savedFilter, [saveName]: {}};

then update the result with a loop:

for (const {id, value} of filteredSearchItems) {
    savedFilter[saveName][id] = value;
}

Here's an example assuming you want to replace the [saveName] property if it exists:

 const filteredSearchItems=[{ "id":"das", "value":45 }, { "id":"das3", "value":48 }, { "id":"das4", "value":47 }, { "id":"das5", "value":46 }, ]; let savedFilter = {somethingAlreadyThere: 42}; const saveName = "fooCriteria"; savedFilter = {...savedFilter, [saveName]: {}}; for (const {id, value} of filteredSearchItems) { savedFilter[saveName][id] = value; } console.log(savedFilter);

There are other, more complicated ways ( reduce , map and Object.fromEntries , ...), but they don't have any advantage over the simple, straightfoward loop.

That said, the map and Object.fromEntries version is really concise, if that's your thing:

// Assumes you want to replace the [saveName] property entirely
const saveName = "fooCriteria";
savedFilter = {
    ...savedFilter,
    [saveName]: Object.fromEntries(filteredSearchItems.map(({id, value}) => [id, value]))
};

 const filteredSearchItems=[{ "id":"das", "value":45 }, { "id":"das3", "value":48 }, { "id":"das4", "value":47 }, { "id":"das5", "value":46 }, ]; let savedFilter = {somethingAlreadyThere: 42}; const saveName = "fooCriteria"; savedFilter = { ...savedFilter, [saveName]: Object.fromEntries(filteredSearchItems.map(({id, value}) => [id, value])) }; console.log(savedFilter);

Don't be fooled, though, there's a loop in there (actually two of them, one for map , the other for fromEntries ). :-)

Answer 4

Using ...spread operator you can do it something like this:

 const filteredSearchItems = [{ "id": "das", "value": 45 }, { "id": "das3", "value": 48 }, { "id": "das4", "value": 47 }, { "id": "das5", "value": 46 }, ] let savedFilter = ""; const savefilter = () => { const saveName = "fooCriteria"; let res = {}; filteredSearchItems.forEach(item => { if (!savedFilter) { savedFilter = { [saveName]: { [item.id]: item.value } }; } else savedFilter[saveName] = { ...{ [item.id]: item.value }, ...savedFilter[saveName] } }); }; savefilter(); console.log("savedFilter :", savedFilter.fooCriteria)

Answer 5

    const filteredSearchItems=[{
      "id":"das",
      "value":45
    },
    {
      "id":"das3",
      "value":48
    },
    {
      "id":"das4",
      "value":47
    },
    {
      "id":"das5",
      "value":46    
    },

    ]
    var a1={};
    for(let i=0 ; i<filteredSearchItems.length;i++){
        let id1 = filteredSearchItems[i].id;
        let id2 = filteredSearchItems[i].value;
        a1[id1] = id2;
    }
    var t2 = {"fooCriteria": a1}
    console.log(JSON.stringify(t2));

Output : {"njkcnv":{"das":45,"das3":48,"das4":47,"das5":46}}