Javascript Question posted in
A very good W3school tutorial can be found here.

populate javascript object by another one

I have a javascript object like this

const allData = {
  "aaa": {
    "xxx": {},
    "details": {
      "111": {
        "a": 1
      }
    }
  },
  "bbb": {
    "yyy": {},
    "details": {
      "222": {
        "a": 10
      }
    }
  },
  "ccc": {
    "zzz": {},
    "details": {
      "333": {
        "a": 100
      }
    }
  },
  "ddd": {
    "kkk": {},
    "details": {
      "444": {
        "a": 1000
      }
    }
  }
};

and I like to get all details to another one, so:

allDetails={};
$.each(allData, function (nameCont, valCont){
  console.dir(valCont.details);
  Object.defineProperty(allDetails, nameCont, valCont.details);
});
console.dir(allDetails);

I expect the result should be:

{
  "aaa": {
    "111": {
      "a": 1
    }
  },
  "bbb": {
    "222": {
      "a": 10
    }
  },
  "ccc": {
    "333": {
      "a": 100
    }
  },
  "ddd": {
    "444": {
      "a": 1000
    }
  }
}

But it doesn’t work… What’s wrong?

Here the fiddle

Tags:

4

Answers


  1. 0

    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

    Parameters
    obj : The object on which to define the property.
    prop : A string or Symbol specifying the key of the property to be defined or modified.
    descriptor: The descriptor for the property being defined or modified.

    Your call to this:

    Object.defineProperty(allDetails, nameCont, valCont.details);

    passes a value as the descriptor, not a descriptor, so should be:

    Object.defineProperty(allDetails, nameCont, { value: valCont.details });

    Updated fiddle: https://jsfiddle.net/th1ves6q/

    allData={
  "aaa":{
    "xxx":{},
    "details":{
      "111":{
        "a":1
      }
    }
  },
  "bbb":{
    "yyy":{},
    "details":{
      "222":{
        "a":10
      }
    }
  },
  "ccc":{
    "zzz":{},
    "details":{
      "333":{
        "a":100
      }
    }
  },
  "ddd":{
    "kkk":{},
    "details":{
      "444":{
        "a":1000
      }
    }
  }
};
allDetails={};
$.each(allData, function (nameCont, valCont){
  //console.dir(valCont.details);
  Object.defineProperty(allDetails, nameCont, { value: valCont.details });
});

console.dir(allDetails);
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

View result in browser console
    Login or Signup to reply.
  2. 0

    use …spread syntax

    const allDetails = {...allData}
    Login or Signup to reply.
  3. 0 
    const allData = {
  "aaa": {"xxx": {}, "details": { "111": { "a": 1 }}},
  "bbb": {"yyy": {}, "details": { "222": { "a": 10 }}},
  "ccc": {"zzz": {}, "details": { "333": { "a": 100 }}},
  "ddd": {"kkk": {}, "details": { "444": { "a": 1000 }}}
};

const result = Object.entries(structuredClone(allData)).reduce((acc, [k,v]) => {
  acc[k] = v.details;
  return acc;
}, {});

console.log(result);
// {"aaa":{"111":{"a":1}}, "bbb":{"222":{"a":10}}, "ccc":{"333":{"a":100}}, "ddd":{"444":{"a":1000}}};
    Login or Signup to reply.
  4. 0

    Nested for of using Object.entries on first loop get the first key and record its value to results creating an empty object, then on second loop get the value.details key/value and record that to results.

    const allData = {
  "aaa": {
    "xxx": {},
    "details": {
      "111": {
        "a": 1
      }
    }
  },
  "bbb": {
    "yyy": {},
    "details": {
      "222": {
        "a": 10
      }
    }
  },
  "ccc": {
    "zzz": {},
    "details": {
      "333": {
        "a": 100
      }
    }
  },
  "ddd": {
    "kkk": {},
    "details": {
      "444": {
        "a": 1000
      }
    }
  }
};

const allDetails = (obj) => {
  let result = {}
  for (let [k, v] of Object.entries(obj)) {
    result[k] = {}
    for (let [key, val] of Object.entries(v.details)) {
      result[k][key] = val
    }
  }
  return result;
};

console.log(allDetails(allData));
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search