source

워드프레스에서 내보낸 두 Json 파일을 결합합니다.

manysource 2023. 9. 27. 18:01

워드프레스에서 내보낸 두 Json 파일을 결합합니다.

워드프레스에서 내보낸 2개의 Json 파일이 있는데, 이 파일들을 하나의 Json 파일로 결합해서 개츠비 JS와 함께 만들고 있는 웹사이트로 가져올 수 있도록 하고 싶습니다.그 파일들 중 하나는posts.json그리고 또 하나는postsMeta.json. postsMeta의 post_id는 posts의 ID와 일치합니다.

그 둘을 합치는 것은 어떻게 하는 것이 방법은 무엇이 좋을까요?제가 좀 해봐도 될까요?forjs에서 루프를 하면 어떻게 하죠?나는 이것을 도와줄 수 있는 어떤 종류의 json 탐색기가 있습니까?

마지막으로 나는 또한 다음과 같은 불필요한 분야들을 잘라내고 싶습니다.post_parentjson과 같은 게시물에서.meta_key게시물에 메타슨이 있었습니다.

네, 이것이 충분히 명확하기를 바랍니다. 미리 감사드립니다.

여기 두 파일의 첫 번째 개체 대응 쌍의 예가 있습니다.

posts.json

{"ID":"19","post_author":"2","post_date":"2010-12-31 23:02:04","post_date_gmt":"2010-12-31 23:02:04","post_content":"Harry Potter was not available for the first sitting of the Halloween Picture. I hope everyone had a safe and fun Halloween. Tomorrow is picture retake day, please send back your previous prints if you want retakes. It is also hot lunch. See You tomorrow!","post_title":"Happy Halloween","post_excerpt":"","post_status":"publish","comment_status":"open","ping_status":"open","post_password":"","post_name":"happy-halloween","to_ping":"","pinged":"","post_modified":"2011-01-03 05:26:11","post_modified_gmt":"2011-01-03 05:26:11","post_content_filtered":"","post_parent":"0","guid":"http:\/\/localhost\/mrskitson.ca_wordpress\/?p=19","menu_order":"0","post_type":"post","post_mime_type":"","comment_count":"1"},

포스트 메타제이슨

{"meta_id":"27","post_id":"19","meta_key":"large_preview","meta_value":"http:\/\/www.mrskitson.ca\/wp-content\/uploads\/2010\/12\/halloween.jpg"},

업데이트:

이것은 현재의 답으로 이 문제를 해결하기 위한 시도입니다. 당신은 거기서 코드를 편집할 수 있습니다.

그 둘을 합치는 것은 어떻게 하는 것이 방법은 무엇이 좋을까요?

JSON 파일/데이터 두 개를 반드시 결합해야 합니까?

스크립트 내에서 JSON 데이터를 필요로 하거나 로드할 수도 있기 때문입니다.HTML) 그리고 특정 메타 필드/키의 메타 값을 얻기 위해서는,function할 수 있습니다.

// `single` has no effect if `meta_key` is empty.
function getPostMeta( post_id, meta_key, single ) {
    let id = String( post_id ),
        pm = [];
    postsMeta.map( m => {
        let a = ( ! meta_key ) ||
            ( meta_key === m.meta_key );

        if ( a && id === m.post_id ) {
            pm.push( m );
        }
    });

    let meta = {},
        mk = {};
    pm.map( m => {
        let k = m.meta_key, v;

        if ( undefined === meta[ k ] ) {
            meta[ k ] = m.meta_value;
        } else {
            v = meta[ k ];
            if ( undefined === mk[ k ] ) {
                meta[ k ] = [ v ];
                mk[ k ] = 1;
            }

            meta[ k ].push( m.meta_value );
            m[ k ]++;
        }
    });

    pm = null;
    mk = meta_key ? mk[ meta_key ] : null;

    if ( mk ) {
        return single ?
            meta[ meta_key ][0] : // Returns a single meta value.
            meta[ meta_key ];     // Returns all the meta values.
    }

    return meta_key ?
        meta[ meta_key ] : // Returns the value of the `meta_key`.
        meta;              // Or returns all the post's meta data.
}

테스트에 사용한 데이터: (참고:postsMeta위에/위에getPostMeta()함수)

// Array of `post` objects.
const posts = [{"ID":"19","post_author":"2","post_date":"2010-12-31 23:02:04","post_date_gmt":"2010-12-31 23:02:04","post_content":"Harry Potter was not available for the first sitting of the Halloween Picture. I hope everyone had a safe and fun Halloween. Tomorrow is picture retake day, please send back your previous prints if you want retakes. It is also hot lunch. See You tomorrow!","post_title":"Happy Halloween","post_excerpt":"","post_status":"publish","comment_status":"open","ping_status":"open","post_password":"","post_name":"happy-halloween","to_ping":"","pinged":"","post_modified":"2011-01-03 05:26:11","post_modified_gmt":"2011-01-03 05:26:11","post_content_filtered":"","post_parent":"0","guid":"http:\/\/localhost\/mrskitson.ca_wordpress\/?p=19","menu_order":"0","post_type":"post","post_mime_type":"","comment_count":"1"}];

// Array of `meta` objects.
const postsMeta = [{"meta_id":"27","post_id":"19","meta_key":"large_preview","meta_value":"http:\/\/www.mrskitson.ca\/wp-content\/uploads\/2010\/12\/halloween.jpg"},{"meta_id":"28","post_id":"19","meta_key":"many_values","meta_value":"http:\/\/facebook.com"},{"meta_id":"29","post_id":"19","meta_key":"many_values","meta_value":"http:\/\/twitter.com"},{"meta_id":"30","post_id":"19","meta_key":"many_values","meta_value":"http:\/\/linkedin.com"}];

예: (데모를 보려면 이 Fiddle 참조)

// In these examples, we are retrieving the meta value for the post #19 (i.e. ID is 19).

// Retrieve a single value.
// Returns mixed; string, number, etc.
let url = getPostMeta( 19, 'large_preview', true );
console.log( url );

// Retrieve all meta values.
// Always returns an array of values.
let ms = getPostMeta( 19, 'many_values' );
console.log( ms, ms[0] );

// Retrieve all meta data.
// Always returns an object with meta_key => meta_value pairs. I.e. { key => value, ... }
let ma = getPostMeta( 19 );
console.log( ma, ma.large_preview, ma.many_values[0] );

하지만 정말로 JSON 데이터를 결합해야 한다면 다음과 같은 작업을 수행할 수 있습니다. (다시 한 번, 같은 Fiddle의 데모 참조)

// Here we modify the original `posts` object.
posts.map( p => {
    // Add all the post's meta data.
    p.meta = getPostMeta( p.ID );

    // Delete items you don't want..
    delete p.post_parent;
    delete p.menu_order;
    // delete ...;
});

console.log( JSON.stringify( posts[0].meta ) ); // posts[0].meta = object
console.log( posts[0].post_parent, posts[0].menu_order ); // both are undefined

그런 다음 새 JSON 데이터/병합된 JSON 데이터를 복사 붙여넣으려면 다음과 같이 하십시오.

JSON.stringify( posts );

하지만 당신이 정말로 그 게시물의 메타로 무언가를 하고 싶다면, 당신은 그 게시물을 통해 우회할 수 있습니다.posts대상 및 작업 수행(예:

// Here the original `posts` object is not modified, and that we don't
// (though you can) repeatedly call `getPostMeta()` for the same post.
posts.map( p => {
    // Get all the post's meta data.
    let meta = getPostMeta( p.ID );

    // Do something with `meta`.
    console.log( meta.large_preview );
});

console.log( JSON.stringify( posts[0].meta ) ); // posts[0].meta = undefined
console.log( posts[0].post_parent, posts[0].menu_order ); // both still defined

// posts[0].meta wouldn't be undefined if of course posts[0] had a `meta` item,
// which was set in/via WordPress...

js에서 이 작업을 할 수 있다면 사용하기 쉬운 방법이 있습니다.Array#map. 질문을 단순화하면 게시물의 각 항목 아래에 이 메타 데이터를 추가하고 원하는 필드만 얻을 수 있는 방법을 묻는 것입니다.

posts.json이 실제로 배열이라고 가정합니다(예:[{"ID":"19"....).

// Load these server-side, fetch them remotely, copy-paste, etc.
// I'll require them here for simplicity
const posts = require('./posts.json');
const postsMeta = require('./postsMeta.json');

// Build a Map so we can quickly look up the metas by post_id
// Extract what we need by destructuring the args
const metaByPost = postsMeta.reduce((a, {
  post_id: id,
  meta_value: value,
}) => a.set(id, {
  value,
  /* anything else you want in here */,
}), new Map());

const mergedPosts = posts.map(post => ({
  // Spread in the post
  ...post,
  // Spread in the meta content
  ...metaByPost.get(post.ID),
  // Undefine the props we don't want
  post_parent: undefined,
}));

저는 수동으로 정의되지 않은 것으로 설정하는 것을 좋아하지 않습니다. 저는 모든 것을 로드하고 특정한 소품을 정의 해제하는 것보다 어떤 소품을 포함시킬 것인지를 명시적으로 말하는 것이 더 좋다고 생각합니다.

Chrome DevTools 콘솔에서 이 토막글을 직접 사용해 보십시오.

(function(
  postsUrl='https://cdn.glitch.com/61300ea6-6cc4-4cb6-a62f-31adc62ea5cc%2Fposts.json?1525386749382',
  metaUrl='https://cdn.glitch.com/61300ea6-6cc4-4cb6-a62f-31adc62ea5cc%2Fpostmeta.json?1525386742630'
) {
  Promise.all([
    fetch(postsUrl).then(r => r.json()),
    fetch(metaUrl).then(r => r.json()),
  ]).then(([postsResponse, metaResponse]) => {
    // Inspected the actual JSON response to come up with the data structure
    const posts = postsResponse[2].data;
    const meta = metaResponse[2].data;
    const metaByPostId = meta.reduce((accum, el) => {
      accum[el.post_id] = el;
      return accum;
    }, {});
    const transformedPosts = posts.map(post => {
      const merged = {
        ...post,
        ...(metaByPostId[post.ID] || {}),
      };
      delete merged.post_parent;
      // delete any other fields not wanted in the result
      return merged;
    });
    console.log(transformedPosts);
  });
})();
  • URL을 이에 맞게 교체합니다. 여기 Glitch 예제의 URL을 사용했습니다.
  • 와 같이,는 , 에 있습니다.response[2].data를 보려면 Network() / ) 뷰를 합니다. 네트워크 탭 / 구문 분석 보기를 사용하여 구조를 봅니다.
  • 을 바꾸다console.log와 함께copy하려면,

당신의 질문에 대해서는 핵심을 솔직하게 말합니다.우리는 다음을 원합니다.

  • 을 합치다var a = {/*some json*/}안으로var b = {/*another json*/}
  • 을 솎아내다var exclusions = ["post_parent","meta_key"]

JSON 병합

우선 a와 b를 채워야 합니다.JSON은 JSON.parse()를 사용하여 Javascript 객체에 파싱할 수 있습니다.

let a = JSON.parse(/*JSON here*/);
let b = JSON.parse(/*JSON here*/);

속성이 자바스크립트에서 정의되는 방식 때문에 속성을 다시 정의하면 두 번째 정의가 첫 번째 정의를 덮어씁니다.JSONS에는 문자열만 키로 포함되어 있고 문자열은 값으로 포함되어 있기 때문에 얕은 복사본으로도 충분합니다.Object.assign()은 모든 속성(필드 및 값)을 첫 번째 인수에 복사하고 최종 Object를 반환합니다.따라서 서로 다른 키를 가진다고 가정하면 a를 b로 병합하고, 그렇지 않으면 b의 값이 a의 값을 덮어씁니다.

a = Object.assign(a,b);

그렇지 않으면 서로 연결되어 있지 않은 경우 가입 방법에 대한 몇 가지 정책을 정의해야 합니다. 예를 들어 가입 방법에 대한 정책의 우선 순위를 지정할 수 있습니다.아래에서는 값을 대신 a에 유지합니다.

a = Object.assign(b,a);

이 를 forloop, 아래 라인은 위의 두 코드 라인과 동일한 작업을 수행하며 또한 사용자 정의 람다 식을 작성하는 방법에 대한 예를 보여줄 것입니다.

Object.keys(a).forEach(k=>b[k]=b[k]?b[k]:a[k]);

않습니다.a그리고.b를 만듭니까?c.

let c = Object.assign({},a,b)

마지막으로 (아래 트림 단계가 완료될 때까지 기다립니다) JSON.stringify()가 병합된 개체를 JSON으로 다시 변환합니다.

트림제외

,c모든 필드에 병합되었습니다.

첫번째 해킹은 여기서 했습니다.

Object.filter = (obj, predicate) => Object.keys(obj)
    .filter( key => predicate(obj[key]))
    .reduce( (res, key) => (res[key] = obj[key], res), {} );

이제 Objects는 배열과 마찬가지로 확장 Object prototype을 가진 필터 프로토타입을 가지고 있습니다.이것은 모든 Object를 확장하기 때문에 최선의 방법은 아니지만 이 기능은 자바스크립트의 의미론과 관련하여 매우 잘 작동하며 이 예제는 우아한 자바스크립트 스타일 코드를 유지할 수 있는 기회가 됩니다.

c = Object.filter(c, key=> !exclusions.includes(key) );

보이트라, 됐습니다

정의된 개체에 관해서는.filter()는 Array.filter()Array.reduce()를 사용합니다. 참고하시려면 클릭하십시오.

언급URL : https://stackoverflow.com/questions/50081588/combine-two-json-files-exported-from-wordpress