Given your Object:
var foo = { 'bar' : 'baz' }
To get bar, use:
Object.keys(foo)[0]
To get baz, use:
foo[Object.keys(foo)[0]]
//Assuming a single object
// stack overflow에 답변을 확인하고 처리
let 숙성 = [
{ '우유': '치즈' },
{ '포도':'와인' },
{ '배추':'김치' }
];
Object.keys(숙성)
//outfut : (3) ['0', '1', '2']
숙성[Object.keys(숙성)[0]]
{우유: '치즈'}
숙성[Object.keys(숙성)[1]]
{포도: '와인'}
숙성[Object.keys(숙성)[2]]
{배추: '김치'}
Object.values().
Object.values(data)
위 방법을 응용해보니
Object.keys(자료[0])
소괄호에 인덱스를 넣어 키값만을 찾을 수 있었고,
Object.values(자료[0])
keys가 아닌 values로 값을 찾을 수 있었다.
function abc() {
for (i = 0; i < 자료.length; i++) {
document.querySelector('#product-detail')
.innerText =
Object.keys(자료[i]) + ' ' +
Object.values(자료[i]);
}
}
abc();
문제발생 : 위에서 얻은 방법으로 반복문을 돌려보니 0번째 객체는 입력되지 않고, 마지막 객체가 입력되었다.
개발자도구의 디버거에는 문제가 없고, 0번째가 아닌 1번째만 나타난다는 점에서 반복문이 잘못되어 있기보다는
innerText 로 값을 바꿀 때 문제가 생긴다고 접근하니 innerText가 반복문을 통해 계속 바뀌다보니 마지막 값으로 입력된다는 것을 알게되었다.
'<p class="products>' +
Object.keys(자료[i]) +
' ' +
Object.values(자료[i]) +
'</p>'
javascript create element above element
답변 :
If you can pinpoint the container element you can make use of .insertBefore()
document.getElementsByClassName('products')[i]
.insertBefore(document.querySelector('div'),
document.querySelector('.product-detail'));
참고 stackoverflow
1. https://stackoverflow.com/questions/6268679/best-way-to-get-the-key-of-a-key-value-javascript-object
2. https://stackoverflow.com/questions/17635866/get-values-from-an-object-in-javascript/25797464
3.https://stackoverflow.com/questions/35012905/create-div-above-other-div-only-with-javascript