배열 내 키,속성 값 찾기

javascript how to get object key in array for html?

배열 내 객체의 키값을 어떻게 찾을 수 있을까요?

---

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]]
{배추: '김치'}

---

자료 형태가 키, 속성이 따로 출력되길 원했기에 다시 검색해 보았다.

javascript how to get object value?

검색하면서 얻은 정보로는 ES2017 이후로 다음과 같이 사용할 수 있었다.

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가 반복문을 통해 계속 바뀌다보니 마지막 값으로 입력된다는 것을 알게되었다.

document.write(Object.keys(자료[i]) + ' ' + Object.values(자료[i]))로 바꾸어 입력하니 정상작동됨을 확인하고, 구분되야하기에 실행되는 요소에

'<p class="products>' +
Object.keys(자료[i]) +
' ' +
Object.values(자료[i]) +
'</p>'

클레스를 생성하여 만들었다.분명 더 좋은 방법이 있을 것 같은데,, 생각해도 더 좋은 방법을 모르겠다. 배운게 부족하다보니 당연하다고 생각하여 실행된다는 점에 만족했다.

---

생성되는 products는 마진500을 가진 div 위에 생성되어야 했는데, appendchild로는 해결할 수 없어 방법을 검색 해보았다.

javascript create element above element

답변 :
If you can pinpoint the container element you can make use of .insertBefore()

container.insertBefore(divAbove, div);

insertBefore를 통해 내가 원하는 위치를 조정할 수 있었다.

부모요소.insertBefore(위치설정요소,그아래요소)

---

 document.getElementsByClassName('products')[i]
.insertBefore(document.querySelector('div'),
document.querySelector('.product-detail'));

insertBefore 함수를 통해 정확히 원하는 곳에 넣을 수 있었다. 간단한 innerHTML을 바꾸는 문제였는데 하다보면 산으로 간다..

[ 나중에 createElement,classList.add를 통해 위 방법을 수정해보자]

참고 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